鼠标按钮
只有在主鼠标按钮被单击(或键盘回车键被按下)是才会触发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;
}
},
//省略了其他代码
};