js 获得点击的鼠标按钮键

浏览数：15 / 时间：2015年06月09日

对于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>