JS--JavaScript使用鼠标事件（click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove）

鼠标事件

事件类型	说明
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上，并按了回车键时，同样会触发事件
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	单击任意一个鼠标按钮时发生
mouseout	鼠标指针位于某个元素上，且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素，到另一个元素上时发生
mouseup	松开任意一个鼠标按钮时发生
mousemove	鼠标在某个元素上时持续发生

示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><p>鼠标事件</p><input type="text" id="text"/><script>var p1 = document.getElementsByTagName("p")[0];var t = document.getElementById("text");function f(){var eve = event || window.event;t.value = eve.type;}p1.onmouseover = f;//注册鼠标经过时事件处理函数p1.onmouseout = f;//注册鼠标移开时事件处理函数p1.onmousedown = f;//注册鼠标按下时事件处理函数p1.onmouseup = f;//注册鼠标松开时事件处理函数p1.onmousemove = f;//注册鼠标移动时事件处理函数p1.onclick = f;//注册鼠标单击时事件处理函数p1.ondblclick = f;//注册鼠标双击时事件处理函数</script></body>
</html>

鼠标点击

鼠标点击事件包括4个：click（单击）、dblclick（双击）、mousedown（按下）和mouseup（松开）。其中click事件比较常用。当这些事件处理函数返回值为false时，会禁止绑定对象的默认行为。

示例：取消超链接被单击时的跳转行为

<a name="tag" id="tag" href="https://www.baidu.com">百度</a>
<script>var a = document.getElementsByTagName("a");for(var i = 0; i < a.length; i++){a[i].onclick = function(){return false;}}
</script>

鼠标移动

mousemove事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢，以及浏览器跟踪更新的速度。

示例：页面元素拖放

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="box"></div><script>//初始化拖放对象var box = document.getElementById("box");box.style.position = "absolute"; //绝对定位box.style.width = "160px"; //宽度160像素box.style.height = "120px"; //高度120像素box.style.backgroundColor = "red"; //红色//初始化变量，标准化事件对象var mx, my, ox, oy;function e(event){if(!event){event = window.event;event.target = event.srcElement;event.layerX = event.offsetX;event.layerY = event.offsetY;}//计算鼠标指针的x轴距离event.mx = event.pageX || event.clientX + document.body.scrollLeft;//计算鼠标指针的y轴距离event.my = event.pageY || event.clientY + document.body.scrollTop;return event;}//定义鼠标事件处理函数document.onmousedown = function(event){event = e(event);//获取标准事件对象o = event.target;ox = parseInt(o.offsetLeft); //拖放元素的x轴坐标oy = parseInt(o.offsetTop); //拖放元素的y轴坐标mx = event.mx;       //按下鼠标指针的x轴坐标my = event.my;      //按下鼠标指针的y轴坐标document.onmousemove = move;document.onmouseup = stop;}function move(event){event = e(event);o.style.left = ox + event.mx - mx + "px"; //定义拖动元素的x轴距离o.style.top = oy + event.my - my + "px"; //定义拖动元素的y轴距离}function stop(event){event = e(event);ox = parseInt(o.offsetLeft); //记录拖放元素的x轴坐标oy = parseInt(o.offsetTop);  //记录拖放元素的y轴坐标mx = event.mx; //记录鼠标指针的x轴坐标my = event.my;    //记录鼠标指针的y轴坐标o = document.onmousemove = document.onmouseup = null; //释放对象}</script></body>
</html>

鼠标经过

鼠标经过包括移过和移出两种事件类型。当移动鼠标指针到某个元素上时，将触发mouseover事件；而当把鼠标指针移出某个元素时，将触发mouseout事件。如果从父元素中移到了子元素中时，也会触发父元素的mouseover事件类型。

示例：分别为3个嵌套的div元素定义了mouseover和mouseout事件处理函数，当从外层的父元素中移动内部的子元素中，将会触发父元素的mouseover事件类型，但是不会触发mouseout事件类型。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div><div><div>盒子</div></div></div><script>var div = document.getElementsByTagName("div");for(var i = 0; i < div.length; i++){div[i].onmouseover = function(){this.style.border = "solid blue";}div[i].onmouseout = function(){this.style.border = "solid red";}}</script></body>
</html>

鼠标来源

当一个事件发生后，可以使用事件对象的target属性获取发生事件的节点元素。如果在IE事件模型中实现相同的目标，可以使用srcElement属性。

示例：当鼠标移过页面中的div时，会弹出提示对话框，提示当前元素的节点名称

<div>div元素</div>
<script>var div = document.getElementsByTagName("div")[0];div.onmouseover = function(e){var e = e || window.event;var o = e.target || e.srcElement;alert(o.tagName);}
</script>

另外，在DOM事件模型中，还定义了currentTarget属性，当事件在传播过程中（如捕获和冒泡阶段）时，该属性值与target属性值不同。因此，一般在事件处理函数中，应该使用该属性而不是this关键词获取当前对象。

示例：当鼠标移动到div元素上时，会弹出“BODY”字符提示信息，说明鼠标指针是从body元素过来的；而移开鼠标指针时，又弹出“BODY“字符提示信息，说明离开元素将要移到的元素。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div>div元素</div><p>段落</p><script>var div = document.getElementsByTagName("div")[0];div.onmouseover = function(){var e = e || window .event;var o = e.relatedTarget || e.fromElement;//标准化事件属性alert(o.tagName);}div.onmouseout = function(){var e = e || window .event;var o = e.relatedTarget || e.toElement;//标准化事件属性alert(o.tagName);}</script></body>
</html>