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;

　　　　　　　　　　}

　　　　　　　　},

　　　　　　//省略了其他代码

　　　　};