鼠标事件（二）

在鼠标事件的事件对象中，相应的保存着与该事件对应的信息。

• 当鼠标主按钮（默认左键）按下并抬起时，触发click事件，这个信息是固定的。但当发生mousedown和mouseup时，event就会有一个button属性来保存按下或抬起的键。当event.button为0时是主键（左键），为1时是滚轮，为2时是次键（右键）。然而，IE8则保存完全不同的信息而且比较复杂：

　　0：没有按下鼠标键

　　1：按下鼠标主键

　　2：按下鼠标次键

　　3：按下鼠标主键和次键

　　4：按下鼠标滚轮

　　5：按下鼠标主键和滚轮

　　6：按钮鼠标次键和滚轮

　　7：同时按下主键、次键和滚轮

由于主流浏览器支持DOM，因此最好把IE8内保存的信息转换成更为简便的DOM信息。

EventUtil.getButton = function(event){
　　if(document.implementation.hasFature('MouseEvents','2.0')){
　　　　return event.button;
　　}else{
　　　　switch(event.button){
　　　　　　case 0:
　　　　　　case 1:
　　　　　　case 3:
　　　　　　case 5:
　　　　　　case 7:
　　　　　　　　return 0;
　　　　　　　　break;
　　　　　　case 2:
　　　　　　case 6:
　　　　　　　　return 2;
　　　　　　　　break;
　　　　　　case 4:
　　　　　　　　return 1;
　　　　　　　　break;
　　　　}
　　}

};

• 在很多情况下，获取鼠标的位置也是非常有用的。通过clientX和clientY就可以获取鼠标相对于浏览器视口的横纵坐标：

EventUtil.addEvent(document,'mousemove',function(event){
　　var event = EventUtil.getEvent(event);
　　document.title = event.clientX+','+event.clientY;
});

　　通过pageX和pageY获取鼠标指针相对于页面的距离：

EventUtil.addEvent(document,'mousemove',function(event){
　　var event = EventUtil.getEvent(event);
　　document.title = event.pageX+','+event.pageY;
});

　　然而IE8并不支持pageX和pageY，这个时候就需要使用鼠标光标相对于视口的距离和页面滚动距离来计算页面距离，当页面没有滚动时，页面距离就和视口距离相等：

EventUtil.addEvent(document,'mousemove',function(event){
　　var event = EventUtil.getEvent(event);
　　var pX = event.pageX;
　　var pY = Event.pageY;
　　if(pX === undefined){
　　　　var sX = document.documentElement.scrollLeft||document.body.scrollLeft;
　　　　pX = event.clientX + sX;
　　}
　　if(pY === undefined){
　　　　var sY = document.documentElement.scrollTop||document.body.scrollTop;
　　　　pY = event.clientY + sY;
　　}
　　document.title = pX + ',' + pY;
});

　　通过event对象，还可以获取鼠标指针相对于屏幕的坐标：

EventUtil.addEvent(document,'mousemove',function(event){
　　var event = EventUtil.getEvent(event);
　　document.title = event.screenX + ',' + event.screenY;
});

 

转载于:https://www.cnblogs.com/luoshufang/p/5725795.html