JavaScript高级程序设计46.pdf

鼠标按钮

只有在主鼠标按钮被单击(或键盘回车键被按下)是才会触发click事件,对于mousedown和mouseup事件,其event对象存在一个button属性,表示按下或者释放按钮。DOM的button属性可能有3个值:0表示主鼠标按钮、1表示中间鼠标按钮、2表示次鼠标按钮

IE8及之前版本也提供了button属性,这个属性的值与DOM的button属性有很大差异

0:没有按下按钮

1:按下主鼠标按钮

2:按下次鼠标按钮

3:同时按下主次鼠标按钮

4:中间鼠标的按钮

5:同时按下主鼠标按钮和中间鼠标按钮

6:同时按下次鼠标按钮和中间鼠标按钮

7:同时按下鼠标3个按钮

将IE的其它选项转换为这三个按键的任意一个(主按钮作为优先选取的对象)

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;

              }

          }

        },

      //省略了其它代码

    };

更多的事件信息

“DOM2级事件”规范在event对象中还提供了detail属性,用于给出有关事件的更多信息,对于鼠标事件来说,detail包含一个数组,表示给定位置上发生了多少次单击,在同一像素上相继发生一次mousedown和mouseup算做一次单击,detail属性从1开始计数,每次单击发生后都会递增,如果移动了位置,则detail会被重置为0;

IE通过下列属性为鼠标事件提供了更多的信息

altLeft:布尔值,表示是否按下了Alt键,如果altLeft的值为true,则altKey也为true

ctrlLeft:布尔值,表示是否按下了Ctrl键,如果ctrlLeft的值为true,则ctrlKey也为true

offsetX:光标相对于目标元素边界的x坐标

offsetY:光标相对于目标元素边界的y坐标

shiftLeft:布尔值,表示是否按下了Shift键,如果shiftLeft的值为true,则shiftKey也为true

这些属性的用处并不大

鼠标滚轮事件

用户通过鼠标滚轮与页面交互时,就会触发mousewheel事件,这个事件可以在任何元素上触发,最终会冒泡到document(IE8)或window(IE9和其他现代浏览器,不包括firefox)

mousewheel事件对于的event对象除包含鼠标事件的所有标准信息,还包含一个特殊的wheelDelta属性,当滚轮向前滚动时wheelDelta是120的倍数,反之是-120的倍数

EventUtil.addHandler(document,"mousewheel",function(event){

        event=EventUtil.getEvent(event);

        alert(event.wheelDelta);

      });

多数情况主要知道鼠标滚轮滚动方向就够了,需要注意的是在Opera9.5之前的版本中,wheelDelta值得正负号是颠倒的

EventUtil.addHandler(document,"mousewheel",function(event){

        event=EventUtil.getEvent(event);

        var delta=(client.engine.opera && client.engine.opera<9.5 ? -event.wheelDelta : event.wheelDelta);

        alert(delta);

      });

Firefox支持一个名为DOMMouseScroll的类似事件,也是在鼠标滚轮滚动时触发,DOMMouseScroll也包含于鼠标事件的所有属性,有关鼠标滚轮的信息保存在detail属性中,滚轮向前滚时,这个值是-3的倍数,向后滚时是3的倍数,可以将DOMMouseScroll添加到页面中的任何元素,该事件会冒泡到window对象

EventUtil.addHandler(window,"DOMMouseScroll",function(event){

        event=EventUtil.getEvent(event);

        alert(event.delta);

      });

将EventUtil对象完善

var EventUtil={

      //省略了其他代码

      getWheelDelta:function(event){

          if(event.wheelDelta){

              return(client.engine.opera && client.engine.opera<9.5 ? -event.wheelDelta : event.wheelDelta);

          }else{

              return -event.detail*40;

          }

        },

      //省略了其他代码

    };

原文地址:https://www.cnblogs.com/sdgjytu/p/3783089.html