各浏览器中鼠标按键值的差异

我们知道标准鼠标有左，中，右三个键。鼠标按下时如何判断按下的是哪个键呢？

W3C DOM-Level-2 定义如下

W3C DOM 写道

During mouse events caused by the depression or release of a mouse button, button is used to indicate which mouse button changed state. The values for button range from zero to indicate the left button of the mouse, one to indicate the middle button if present, and two to indicate the right button. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.

 

说的很明确，0，1，2分别代表左，中，右三个键。以下分别在mousedown，mouseup，click，dbclick中测试。

 

<p id="p1">Test mousedown</p>
<p id="p2">Test mouseup</p>
<p id="p3">Test click</p>
<p id="p4">Test dbclick</p>

<script type="text/javascript">
	function $(id){return document.getElementById(id)}
	
	var p1 = $('p1'), p2 = $('p2'), p3 = $('p3'), p4 = $('p4');
	p1.onmousedown = function(e){
		e = window.event || e;
		alert(e.button);
	}
	p2.onmouseup = function(e){
		e = window.event || e;
		alert(e.button);
	}
	p3.onclick = function(e){
		e = window.event || e;
		alert(e.button);
	}
	p4.ondbclick = function(e){
		e = window.event || e;
		alert(e.button);
	}		
</script>

 

 

鼠标左键测试结果

	IE6/7/8	IE9beta	Firefox3.6	Chrome7	Safari5	Opera10
mousedown	1		0	0	0	0
mouseup	1		0	0	0	0
click	0		0	0	0	0
dbclick	error		error	error	error	error

 

即：

IE6/7/8中，mousedown/mouseup 事件中获取左键的值为1，click事件中获取的却是0。

其它浏览器，mousedown/mouseup/click 事件中获取左键值均为0。完全遵循标准。

所有浏览器，dbclick事件中均无法获取

 

鼠标中键测试结果

	IE6/7	IE8	IE9beta	Firefox3.6	Chrome7	Safari5	Opera10
mousedown	4	4		1	1	1	error
mouseup	4	4		1	1	1	error
click	error	0		error	1	1	error
dbclick	error			error	error	error	error

 

即：

IE6/7/8中，mousedown/mouseup 事件中获取中键的值为4。

IE6/7中，click事件无法获取中键的值。IE8则可以，但值为0。

Firefox3.6/Chrome7/Safari5中，mousedown/mouseup 事件中获取中键值为1。

Chrome7/Safar5中，click事件也能获取中键值，亦为1。

Opera10中无法获取中键值。

 

 

鼠标右键测试结果

	IE6/7/8	IE9beta	Firefox3.6	Chrome7	Safari5	Opera10
mousedown	2		2	2	2	2
mouseup	2		2	2	2	2
click	error		error	error	error	error
dbclick	error		error	error	error	error

 

即：

所有浏览器，mousedown/mouseup事件中均能获取右键值，且都为2.

所有浏览器，click/dbclick事件中均不能获取到右键值。

 

 

以上可看到，判断鼠标按下了哪个键 ，应该选择合适的事件 。这里应选mousedown/mouseup。Opera10中仍然无法获取到中键的值，因为Opera压根不触发中键的事件(mousedown,mouseup,click,dbclick)。

 

以下代码将IE6/7/8的值转换成符合W3C标准的

var ie678 = function(ua){
    function check(r){
        return r.test(ua);
    }
	var isOpera = check(/opera/),
		isIE = !isOpera && check(/msie/),
		isIE6 = isIE && check(/msie 6/),	
        isIE7 = isIE && check(/msie 7/),
        isIE8 = isIE && check(/msie 8/);
    
    return isIE6 || isIE7 || isIE8;
}(navigator.userAgent.toLowerCase());

function getButton(e){
	var code = e.button;
	var ie678Map = {
		1 : 0,
		4 : 1,
		2 : 2
	}
	if(ie678){
		return ie678Map[code];
	}
	return code;
}

 

 

 

评论

5 楼 cuixiping 2010-12-09  

还有左右齐按呢？左右依次按下，或者依次松开呢？估计也会有些差异。
很久以前做扫雷的时候碰到过，某些浏览器，按下第一个，再按第二个，再一起松开，发现只有一个mouseup冒出来，郁闷。

4 楼 Andrew1945 2010-12-05  

有没有人知道按键在不同浏览器的差异呢！

3 楼 softor 2010-12-02  

个性的浏览器……

2 楼 pfans 2010-11-28  

测试了下，Opera中中键果然不能触发事件(mousedown,mouseup,click,dbclick)。中键点击会出现十字方向图标。Opera得给力！

1 楼 lixinlixin2008 2010-11-27  

opera要给力给力给力~~~