DOM3级事件中定义了以下9个鼠标事件&＃xff1a;
- click&＃xff1a;在用户单击主鼠标按钮或者按下回车键时触发。意味着onclick事件处理程序既可以通过键盘也可以i通过鼠标执行。
- dbclick&＃xff1a;在用户双击主鼠标按钮时触发。&＃xff08;在DOM2中没有规定&＃xff0c;在DOM3中做了规定&＃xff09;
- mousedown&＃xff1a;在用户按下任意鼠标按钮时触发。
- mouseenter&＃xff1a;在鼠标光标从元素外部首次移动到元素范围之内时触发。&＃xff08;在DOM2中没有规定&＃xff0c;在DOM3中做了规定&＃xff09;
- mouseleave&＃xff1a;在位于元素上方的鼠标光标移动到元素范围之外时触发。&＃xff08;在DOM2中没有规定&＃xff0c;在DOM3中做了规定&＃xff09;
- mousemove&＃xff1a;当鼠标指针在元素内部移动时重复的触发。
- mouseout&＃xff1a;在鼠标位于一个元素上方&＃xff0c;然后移动到另一个元素时触发&＃xff0c;另一个元素可以位于另一个元素的外部&＃xff0c;也可以是这个元素的子元素&＃xff1b;不能通过键盘触发。
- mouseover&＃xff1a;在鼠标位于一个元素外部&＃xff0c;然后将其首次移动到另一个元素边界之内时触发&＃xff1b;不能通过键盘触发
- mouseup&＃xff1a;释放鼠标按钮时触发&＃xff1b;不能通过键盘触发。
除了mouseenter、mouseleave、dbclick是“DOM3级事件”新增之外&＃xff0c;其它事件都是“DOM2级事件”中定义的。
在一个元素上相继触发mousedown和mouseup事件&＃xff0c;才会触发click事件。两次click事件相继触发才会触发dblclick事件。如果取消 了mousedown或mouseup中的一个&＃xff0c;click事件就不会被触发。直接或间接取消了click事件&＃xff0c;dblclick事件就不会被触发了。
这四个事件的触发顺序如下&＃xff1a;
&＃xff08;1&＃xff09;mousedown
&＃xff08;2&＃xff09;mouseup
&＃xff08;3&＃xff09;click
&＃xff08;4&＃xff09;mousedown
&＃xff08;5&＃xff09;mouseup
&＃xff08;6&＃xff09;click
&＃xff08;7&＃xff09;dbclick
可以使用如下代码检测浏览器是否支持“DOM2级”鼠标事件&＃xff1a;
var isSupported &＃61; document.implementation.hasFeature("MouseEvents", "2.0");alert(isSupported); //true
是否支持“DOM3级”鼠标事件&＃xff1a;
var isSupported &＃61; document.implementation.hasFeature("MouseEvent", "3.0");alert(isSupported); //true
注意&＃xff1a;“DOM3级”鼠标事件的feature名为MouseEvent&＃xff1b;而“DOM2级”为MouseEvents。
滚轮事件其实就是一个mousewheel事件。
1、客户区坐标位置
通过事件对象event的clientX和clientY属性&＃xff0c;可以访问事件发生时鼠标指针在视窗中的水平和垂直坐标。
EventUtil.addHandler(document, "click", function(event) {event &＃61;EventUtil.getEvent(event);alert("鼠标指针客户区坐标为&＃xff1a;水平距离—" &＃43; event.clientX &＃43; "&＃xff1b;" &＃43; "垂直距离—" &＃43; event.clientY &＃43; "");});
注意&＃xff1a;这些值不包括页面滚动的距离&＃xff0c;因此这个位置并不表示鼠标在页面上的位置。
2、页面坐标位置
客户区坐标可以知道鼠标是在视口的什么位置发生的&＃xff0c;而通过事件对象event的pageX和pageY属性&＃xff0c;可以访问事件发生时鼠标指针在页面中的水平和垂直坐标。
EventUtil.addHandler(document, "click", function(event) {event &＃61; EventUtil.getEvent(event);alert("鼠标指针页面坐标为&＃xff1a;水平距离—" &＃43; event.pageX &＃43; "&＃xff1b;" &＃43; "垂直距离—" &＃43; event.pageY);
});
在页面没有滚动的情况下&＃xff0c;pageX和pageY的值与clientX和clientY的值相等。
IE8及更早版本不支持事件对象上的页面坐标&＃xff0c;不过可以使用客户区坐标和滚动信息计算出来。需要用到document.body&＃xff08;混杂模式&＃xff09;或者document.documentElement&＃xff08;标准模式&＃xff09;中的scrollLeft和scrollTop属性。
EventUtil.addHandler(document, "click", function(event) {event &＃61; EventUtil.getEvent(event);var pageX &＃61; event.pageX;var pageY &＃61; event.pageY;if(pageX &＃61;&＃61;&＃61; undefined) {pageX &＃61; event.clientX &＃43; (document.body.scrollLeft || document.documentElememt.scrollLeft);};if(pageY &＃61;&＃61;&＃61; undefined) {pageY &＃61; event.clientY &＃43; (document.body.scrollTop || document.documentElememt.scrollTop);};alert("鼠标指针页面坐标为&＃xff1a;水平距离—" &＃43; pageX &＃43; "&＃xff1b;" &＃43; "垂直距离—" &＃43; pageY);});
3、屏幕坐标位置
通过事件对象event的screenX和screenY属性&＃xff0c;可以访问事件发生时鼠标指针在电脑屏幕中的水平和垂直坐标。
event_util.addHandler(document, "click", function(event) {event &＃61; event_util.getEvent(event);alert("鼠标指针屏幕坐标为&＃xff1a;水平距离—" &＃43; event.screenX &＃43; "&＃xff1b;" &＃43; "垂直距离—" &＃43; event.screenY);});
4、修改键
Shift、Ctrl、Alt、Meta这些修改键经常被用来修改鼠标事件的行为&＃xff0c;DOM为此规定了4个属性&＃xff0c;表示这些修改键的状态&＃xff1a;shiftKey、ctrlKey、altKey、metaKey。这些属性中包含的都是布尔值&＃xff0c;如果值为true&＃xff0c;表示相应的键被按下&＃xff0c;否则为false。当某个鼠标事件发生时&＃xff0c;通过检测这4个属性&＃xff0c;就能确定用户是否按下某个修改键。
var div &＃61; document.getElementById("myDiv");EventUtil.addHandler(div, "click", function(event){event &＃61; EventUtil.getEvent(event);var keys &＃61; new Array();//当属性值为true时&＃xff0c;将对应修改键的名称田间到keys数组中if (event.shiftKey){keys.push("shift");}if (event.ctrlKey){keys.push("ctrl");}if (event.altKey){keys.push("alt");}if (event.metaKey){keys.push("meta");}alert("Keys: " &＃43; keys.join(","));});
5、相关元素
- 对mouseover事件而言&＃xff0c;事件的主目标就是获得光标的元素&＃xff0c;而相关元素就是失去光标的那个元素&＃xff1b;
- 对mouseout事件而言&＃xff0c;事件的主目标就是失去光标的元素&＃xff0c;而相关元素就是获得光标的那个元素。
DOM通过event事件对象的relatedTarget属性提供了相关元素的信息&＃xff0c;这个属性只对mouseover和mouseout事件才包含值&＃xff1b;对于其他事件&＃xff0c;其值为null。
IE8及之前版本不支持relatedTarget属性&＃xff0c;但提供相似的属性。在mouseover事件触发时&＃xff0c;IE的fromElement属性中保存着相关元素&＃xff1b;在mouseout事件触发时&＃xff0c;IE的toElement属性中保存了相关元素。
IE9支持所有的这些属性。
将跨浏览器取得相关元素的方法getRelatedTarge()添加到EventUtil对象中.
getRelatedTarget: function(event) {if(event.relatedTarget) {return event.relatedTarget;} else if(event.fromElement) {return event.fromElement;} else if(event.toElement) {return event.toElement;} else {return null;}
}
6、鼠标按钮
只有在主鼠标按钮被单击(或键盘回车键被按下)时才会触发click事件&＃xff0c;所以需要检测按钮的信息&＃xff0c;对于mousedown和mouseup事件而言&＃xff0c;在event事件对象中存在一个button属性&＃xff0c;表示按下或释放的按钮。
DOM中的button属性可能有以下三个值&＃xff1a;
- 0&＃xff0c;表示主鼠标按钮&＃xff08;鼠标左键&＃xff09;&＃xff1b;
- 1&＃xff0c;表示中间按钮&＃xff1b;
- 2&＃xff0c;表示次鼠标按钮&＃xff08;鼠标右键&＃xff09;。
IE8及之前版本中&＃xff0c;也提供button属性&＃xff0c;但其属性值与DOM的不太通属性值有很大差别。
- 0&＃xff1a;没有按下鼠标按钮&＃xff1b;
- 1&＃xff1a;主鼠标按钮&＃xff1b;
- 2&＃xff1a;次鼠标按钮&＃xff1b;
- 3&＃xff1a;同时按下主鼠标按钮和次鼠标按钮&＃xff1b;
- 4&＃xff1a;中间鼠标按钮&＃xff1b;
- 5&＃xff1a;同时按下主鼠标按钮和中间鼠标按钮&＃xff1b;
- 6&＃xff1a;同时按下次鼠标按钮和中间鼠标按钮&＃xff1b;
- 7&＃xff1a;同时按下三个鼠标按钮
EventUtil对象添加getButton()方法。
var EventUtil&＃61;{
//省略其他代码
getButton: function(event) {if(document.implementation.hasFeature("MouseEvents", "2.0")) { //确定event对象中存在的button属性中是否包含正确的值return event.button;} else { //不包含正确的值&＃xff0c;说明是ie&＃xff0c;需要对相应的值进行规范化&＃xff0c;将IE模型规范化为DOM方式switch(event.button) {case 0:case 1:case 3:case 5:case 7:return 0;case 2:case 6:return 2;case 4:return 1;}}
}
//省略其他代码
}
7、更多的事件信息
对于鼠标事件来说&＃xff0c;detail属性中包含一个数值&＃xff0c;表示在给定位置上发生多少次单击&＃xff1b;在同一个位置上相继发生mousedown和mouseup事件算作一次单击。detail从1开始计数。如果鼠标在mousedown和mouseup事件之间移动了位置&＃xff0c;则detail的值会被重置为0。
8、鼠标滚轮事件
当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时&＃xff0c;会触发mousewheel事件&＃xff0c;该事件可以在任何元素上触发&＃xff0c;最终会冒泡到document&＃xff08;IE8&＃xff09;或window&＃xff08;IE9、Opera、Chrome和Safari&＃xff09;对象。与mousewheel事件对应的event对象除了包含鼠标事件的所有标准信息之外&＃xff0c;还包含一个特殊的wheelDelta属性&＃xff1b;当用户向前滚动鼠标滚轮时&＃xff0c;wheelDelta是120的倍数&＃xff0c;当用户向后滚动鼠标滚轮时&＃xff0c;wheelDelta是-120的倍数。
下述代码可以得到wheelDelta的值&＃xff0c;但多数情况下&＃xff0c;只需要知道滚动鼠标滚轮的方向&＃xff0c;而这通过检测wheelDelta的正负号就可以确定。
EventUtil.addHandler(document, "mousewheel", function(event) {event &＃61; EventUtil.getEvent(event);alert(event.wheelDelta);});
注意&＃xff1a;在Opera9.5及之前版本中&＃xff0c;wheelDelta的正负号是颠倒的&＃xff1b;可以使用浏览器检测技术来确定实际的值&＃xff0c;如下&＃xff1a;
EventUtil.addHandler(document, "mousewheel", function(event) {event &＃61; EventUtil.getEvent(event);var delta &＃61; (client.engine.opera && client.engine.opera <9.5 ? -event.wheelDelta : event.wheelDelta)alert(delta);
});
在Firefox浏览器中&＃xff0c;支持一个名为DOMMouseScroll的事件&＃xff0c;也是在鼠标滚轮滚动时触发&＃xff0c;其被视为鼠标事件&＃xff0c;包含与鼠标事件有关的所有信息&＃xff1b;而有关鼠标滚轮的信息则保存在detail属性中&＃xff0c;当向前滚动滚轮时&＃xff0c;其值为-3的倍数&＃xff0c;当向后滚动滚轮时&＃xff0c;其值为3的倍数。
可以将DOMMouseScroll事件添加到页面中的任何元素&＃xff0c;而且该事件会冒泡到window对象。所以可以像下面这样针对这个事件来添加事件处理程序&＃xff1a;
EventUtil.addHandler(document, "DOMMouseScroll", function(event) {event &＃61;EventUtil.getEvent(event);alert(event.detail);});
跨浏览器环境下的解决方案&＃xff1a;
getWheelDelta: function(event) {if(event.wheelDelta) {return event.wheelDelta;} else {return -event.detail * 40;}
}
京公网安备 11010802041100号