刚刚看了一篇关于鼠标事件的文章,整理下用法....
-
鼠标事件是web开发最常用的一类事件,由于各种原因,不同开发商或者不同版本的浏览器之间对于鼠标事件的实现也有所不同.
- mouseover 和mouseout 相关元素差异
mouseover和mouseout是DOM3级事件当中的其中两个事件:
mouseover是当鼠标指针在该目标元素外部,然后用户将鼠标首次移入目标元素的边缘时触发的事件
mouseout是当鼠标指针在当前元素的上方,然后用户将鼠标移入另一个元素时触发的事件.另外一个元素可以位于当前元素的外部也可以是当前元素的子元素
两个事件都是在描述从一个元素移动到另一个元素的情况，因此参与事件有两个元素，目标元素就是事件源,获得另外一个元素可以用evet事件:
标准事件对象 event 有个 relatedTarget 的属性，提供相关元素的信息，只有在 mouseover 和 mouseout 当中该属性才包含元素的信息，在其他事件当中它的值为 null.
举个demo:
这是html代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <style> 7 #myDiv { 8 width: 200px; 9 height: 200px; 10 background-color: red; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="myDiv"> 16 </div> 17 <script src="demo.js"></script> 18 </body> 19 </html>
js代码:
1 var div = document.getElmentById("myDiv"); 2 3 div.addEventListener("mouseover", function(event) { 4 5 alert("Mouse comes from " + event.relatedTarget.tagName); 6 7 // 触发事件，弹出 "Mouse comes from BODY" 8 9 }, false); 10 11 var div = document.getElementById("myDiv"); 12 13 div.addEventListener("mouseout", function(event) { 14 15 alert("Mouse moves to " + event.relatedTarget.tagName); 16 17 // 触发事件，弹出 "Mouse moves to BODY" 18 19 }, false);
IE8 或之前的版本不支持 relatedTarget 属性，我们需要使用另一个属性访问相关元素。
- 当 mouseover 事件触发时，IE 事件对象当中 fromElement 保存相关元素；
- 当 mouseout 事件触发时，IE 事件对象当中 toElement 保存相关元素。
IE使用时的js代码:
var div = document.getElementById("myDiv"); div.attachEvent("onmouseover", function(event) { alert("Mouse comes from " + event.fromElement.tagName); // IE 浏览器中触发事件，弹出 "Mouse comes from BODY" }); var div = document.getElementById("myDiv"); div.attachEvent("onmouseout", function(event) { alert("Mouse moves to " + event.toElement.tagName); // IE 浏览器中触发事件，弹出 "Mouse moves to BODY" });
- 鼠标按键信息差异
鼠标通常包含3个按键，左键、右键和中间的键，获取鼠标按下哪一个键可用event事件中的button
标准事件对象使用 button 属性来识别鼠标按键。
- 0 表示主鼠标按钮（一般为左键），
- 1 表示中间的按钮，
- 2 表示次鼠标按钮（一般为右键）。
demo:
1 var div = document.getElementById("myDiv"); 2 3 div.addEventListener("mousedown", function (event) { 4 5 alert(event.button); // 根据按键不同分别出现值 0，1，2 6 7 }, false);
IE8 或之前的版本中的事件对象同样提供了 button 属性，但是该属性的值与标准事件对象有所不同。
-
0 表示没有按下按钮。
-
1 表示按下主鼠标按钮（一般为左键）。
-
2 表示按下次鼠标按钮（一般为右键）。
-
3 表示同时按下主、次鼠标按钮。
-
4 表示按下中间按钮。
-
5 表示同时按下主鼠标按钮和中间按钮。
-
6 表示同时按下次鼠标按钮和中间按钮。
-
7 表示同时按下了三个按钮
IE事件对象中 button 同时考虑到了两个或多个按钮同时按下的情形，虽然这样的操作并不常见。
- 鼠标滚轮事件差异
mousewheel 事件是使用鼠标滚轮滚动的时候触发的事件，该事件的兼容性比较好，IE6.0 就已实现。
ousewheel 事件对象当中包含一个 wheelDelta 属性，
- 向前滚动滚轮时，wheelDelta 的值为 120 的倍数；
- 向后滚动滚轮时，wheelDelta 的值为 -120 的倍数。
demo:
1 var div = document.getElementById("myDiv"); 2 3 div.addEventListener("mousewheel", function (event) { 4 5 alert(event.wheelDelta); // 120 或 -120 6 7 }, false);
注意点:在 Opera 9.5 之前的版本，wheelDelta 的值与标准的值符号相反。
在 FireFox 浏览器当中，除了 mousewheel 事件外还有一个表示鼠标滚动的事件 DOMMouseScroll。DOMMouseScroll事件当中 detail 的值与 mousewheel 事件对象当中的 wheelDelta 作用相同。
不同点:
- 向前滚动时 detail 值为 -3，
- 向后滚动时 detail 值为 3。
demo:
1 // FireFox 浏览器当中 2 3 var div = document.getElementById("myDiv"); 4 5 div.addEventListener("DOMMouseScroll", function (event) { 6 7 alert(event.detail); // -3 或 3 8 9 }, false);