鼠标事件之JS

<p id="p1">Test mousedown</p>
02 <p id="p2">Test mouseup</p>
03 <p id="p3">Test click</p>
04 <p id="p4">Test dbclick</p>
05   
06 <script type="text/javascript">
07     function $(id){return document.getElementById(id)}
08       
09     var p1 = $('p1'), p2 = $('p2'), p3 = $('p3'), p4 = $('p4');
10     p1.onmousedown = function(e){
11         e = window.event || e;
12         alert(e.button);
13     }
14     p2.onmouseup = function(e){
15         e = window.event || e;
16         alert(e.button);
17     }
18     p3.onclick = function(e){
19         e = window.event || e;
20         alert(e.button);
21     }
22     p4.ondbclick = function(e){
23         e = window.event || e;
24         alert(e.button);
25     }       
26 </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标准的

01 var ie678 = !-[1,];
02 function getButton(e){
03     var code = e.button;
04     var ie678Map = {
05         1 : 0,
06         4 : 1,
07         2 : 2
08     }
09     if(ie678){
10         return ie678Map[code];
11     }
12     return code;
13 }
posted @ 2011-04-07 08:34 Sir。 阅读(...) 评论(...) 编辑 收藏