本文介绍如何使用原生JavaScript实现跨浏览器获取鼠标按键值。通过判断e.button和window.event.button,兼容W3C标准和IE浏览器,返回0、1、2分别代表左键、中键和右键。
原生JS实现跨浏览器获取鼠标按键值
代码示例如下:
document.onmousedown = function( e ){
alert(getButton(e)) // e.button W3C标准下获取鼠标按键:0代表左键,1代表中键,2代表右键;而IE浏览器(主要是IE8及以下版本)的映射为:1代表左键,4代表中键,2代表右键
};
function getButton(e){
/*
1、window.event属性在IE和Chrome浏览器中均受支持
2、但Chrome浏览器同时也兼容W3C标准
3、因此,当W3C与IE标准均支持时,优先采用W3C作为标准化依据
*/
if( e ){ // 首次判断:若存在e对象,则Chrome浏览器以W3C标准为准
return e.button;
}else if( window.event ){
switch( window.event.button ){
case 1 : return 0; // 返回鼠标左键对应的值
case 4 : return 1; // 返回鼠标中键对应的值
case 2 : return 2; // 返回鼠标右键对应的值
case 0 : return 2; // 返回鼠标右键对应的值;此情况主要见于360浏览器,其在IE内核模式下返回0代表未按下鼠标键
};
};
};