JavaScript事件之鼠标事件

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
}