1. 鼠标事件
在DOM3级事件中定义了9个鼠标事件：
- click：在用户单击主鼠标按钮（一般是左边的按钮）或按下回车键时触发
- dbclick：在用户双击主鼠标按钮时触发
- mousedown：在用户按下了任意鼠标按钮时触发
- mouseenter：在护镖光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡，而且在鼠标移动到后代元素上也不会触发
- mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在鼠标移动到后代元素上也不会触发
- mousemove：当鼠标指针在元素内部移动时重复地触发
- mouseout：在鼠标指针位于一个元素上方，然后用户将其移动到另一个元素时触发
- mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发
- mouseup：在用户释放鼠标按钮时触发
触发一个click事件会依次先后触发：
- mousedown
- mouseup
- click
鼠标事件对象中保存着鼠标相对于视口、页面和屏幕的坐标位置信息，通过这些信息可以精确地对鼠标事件进行控制。
- clientX、clientY：鼠标事件发生时鼠标指针在视口（可以看见的区域）中的水平坐标和垂直坐标
- pageX、pageY：鼠标事件发生时鼠标指针相对于整个页面的位置坐标
- screenX、screenY：鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息
IE8及之前版本不支持事件对象上页面坐标，但可以通过视口坐标和滚动信息计算出来。
var pageX = event.pageX, pageY = event.pageY;
if(pageX === undefined) {
pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
}
if(pageY === undefined) {
pageXY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
}
mousedown和mouseup事件的event对象中存在着一个button属性，表示按下或释放的按钮。DOM的button属性有3个值：
- 0：表示主鼠标按钮（鼠标左键）
- 1：表示中间的鼠标按钮（鼠标滚轮）
- 2：次鼠标按钮（鼠标右键）
而IE8及之前版本中button属性与DOM的button属性有很大差异：
- 0：没有按下按钮
- 1：按下主鼠标按钮
- 2：按下次鼠标按钮
- 3：同时按下主、次鼠标按钮
- 4：按下中间按钮
- 5：同时按下主鼠标按钮和中间按钮
- 6：同时按下次鼠标按钮和中间按钮
- 7：同时按下三个按钮
可以通过浏览器的hasFeature()方法来兼容IE和DOM：
var EventUtil = {
getButton: function(event) {
if(document.implementation.hasFeature("MouseEvents", "2.0") {
return event.button;
} else {
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;
}
}
}
}
2. 鼠标滚轮事件 mousewheel
mousewheel事件对应的event对象中除包含鼠标事件的所有标准信息外，还包含一个特殊的wheelDelta属性。当用户向前滚动鼠标滚轮时，wheelDelta是120的倍数；当鼠标滚轮向后滚动是，wheelDelta是-120的倍数。对于Opera9.5之前的版本中，wheelDelta值的正负号是相反的。Firefox支持一个名为DOMMouseScroll的事件，也是在鼠标滚轮滚动是触发，而且该事件会冒泡到window对象中，而有关鼠标滚动信息保存在detail属性中，当鼠标滚轮向前滚动时，这个属性值是-3的倍数，向后滚动时是3的倍数。
跨浏览器环境下的解决方案：
if(event.wheelDelta) {
return event.wheelDelta;
} else {
return -event.detail*40; //Firefox
}
网友评论