对于mousedown和mouseup来说，其event对象中存有一个button属性，表示按下或释放的按钮。DOM中属性有3个值：0表示主鼠标按钮，1表示中间的鼠标按钮，2表示次鼠标按钮（右键）。
但是对于IE8及之前的版本来说，button中所存的值又是不同的：
0：表示没有按下鼠标按钮
1：表示按下主鼠标按钮
2：表示按下次鼠标按钮
3：表示同时按下主次鼠标按钮
4：表示按下了中间的鼠标按钮
5：表示同时按下了主鼠标按钮和中间鼠标按钮
6：表示同时按下了中间和次鼠标按钮
7：表示同时按下主，中间，次鼠标按钮
可以发现，这些button属性和DOM中规定的相比复杂了许多，但是有很多都是不必要的。在通常情况下，同时按下两个及以上的鼠标按钮时很少见的，所以只要判断成其中一个就可以了。对于跨浏览器检测来说，通过映射来使返回的行为一致是很有必要的。在映射中，把主鼠标按钮作为优先选择，即在按下多个键是选用主键，其次是右键。
由于两个属性都位于button，传统的直接检测button是否存在方法就会出现问题。这边使用了一个hasFeature。因为支持DOM规定的button的话，hasFeature('MouseEvents','2.0)返回的就应该是true。所以我们就可以使用hasFeature来检测。
1 function getMouseButton(event){ 2 if(document.implementation.hasFeature('MouseEvents','2.0')){ 3 return event.button; 4 }else{ 5 switch(event.button){ 6 case 0: 7 case 1: 8 case 3: 9 case 5: 10 case 7: 11 return 0; 12 break; 13 case 2: 14 case 6: 15 return 2; 16 break; 17 case 4: 18 return 1; 19 break; 20 } 21 } 22 }
以下是上面这个函数的用例：
1 function eventHandler(dom,type,fn){ 2 if(typeof dom.addEventListener != 'undefined'){ 3 dom.addEventListener(type,fn,false); 4 }else if(typeof dom.attachEvent != 'undefined'){ 5 dom.attachEvent('on'+type,fn); 6 }else{ 7 dom['on'+type] = fn; 8 } 9 } 10 window.onload = function(){ 11 eventHandler(document.getElementById('testele'),'mouseup',function(event){ 12 event = event || window.event; 13 var keyNum = getMouseButton(event),keyName; 14 switch(keyNum){ 15 case 0: 16 keyName = 'Left'; 17 break; 18 case 1: 19 keyName = 'Middle'; 20 break; 21 case 2: 22 keyName = 'Right'; 23 break; 24 } 25 document.getElementById('testele').innerHTML += keyName; 26 }); 27 }
这样就可以正确的判断出所有浏览器下按键的值了。例子完整代码如下：
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function eventHandler(dom,type,fn){ 5 if(typeof dom.addEventListener != 'undefined'){ 6 dom.addEventListener(type,fn,false); 7 }else if(typeof dom.attachEvent != 'undefined'){ 8 dom.attachEvent('on'+type,fn); 9 }else{ 10 dom['on'+type] = fn; 11 } 12 } 13 function getMouseButton(event){ 14 if(document.implementation.hasFeature('MouseEvents','2.0')){ 15 return event.button; 16 }else{ 17 switch(event.button){ 18 case 0: 19 case 1: 20 case 3: 21 case 5: 22 case 7: 23 return 0; 24 break; 25 case 2: 26 case 6: 27 return 2; 28 break; 29 case 4: 30 return 1; 31 break; 32 } 33 } 34 } 35 window.onload = function(){ 36 eventHandler(document.getElementById('testele'),'mouseup',function(event){ 37 event = event || window.event; 38 var keyNum = getMouseButton(event),keyName; 39 switch(keyNum){ 40 case 0: 41 keyName = 'Left'; 42 break; 43 case 1: 44 keyName = 'Middle'; 45 break; 46 case 2: 47 keyName = 'Right'; 48 break; 49 } 50 document.getElementById('testele').innerHTML += keyName; 51 }); 52 } 53 </script> 54 </head> 55 <body> 56 <div id="testele" style="padding:100px;background-color:silver;">click me!</div> 57 </body> 58 </html>