• 鼠标事件之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 }
  • 相关阅读:
    关于margintop/bottom在nonReplaced inline元素上不起作用的解释
    css position
    css :three column +top box
    little box: two box
    css layout :center
    Absolute, Relative, Fixed Positioning: How Do They Differ?
    little box:three column
    利用position:absolute重叠元素
    C#生成(操作)PDF
    asp.net发布网站时三个选项的问题
  • 原文地址:https://www.cnblogs.com/qingci/p/2007414.html
Copyright © 2020-2023  润新知