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

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

W3C DOM-Level-2 定义如下

说的很明确，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中，mousedown/mouseup 事件中获取左键的值为1，click事件中获取的却是0。

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

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

即：

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

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

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

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

Opera10中无法获取中键值。

即：

所有浏览器，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;
}