JavaScript事件之鼠标事件

0.099字数 908阅读 741

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
}

推荐阅读更多精彩内容