`
流浪的我
  • 浏览: 32446 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

鼠标事件

 
阅读更多

鼠标事件是Web 开发中最常用的一类事件,毕竟鼠标还是最主要的定位设备。DOM3 级事件中定义了9 个鼠标事件。

         click:在用户单击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发。这一点对确保易访问性很重要,意味着onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。

         dblclick:在用户双击主鼠标按钮(一般是左边的按钮)时触发。这个事件并不是DOM2 级事件规范中规定的,但鉴于它得到了广泛支持,所以DOM3 级事件将其纳入了标准。 

        mousedown:在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。

        mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件,但DOM3 级事件将它纳入了规范。IE、Firefox 9+和Opera 支持这个事件。

       mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事件,但DOM3 级事件将它纳入了规范。IE、Firefox 9+和Opera 支持这个事件。

        mousemove:当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。

        mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素。不能通过键盘触发这个事件。

       mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。

       mouseup:在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

页面上的所有元素都支持鼠标事件。除了mouseenter 和mouseleave,所有鼠标事件都会冒泡,也可以被取消,而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件的默认行为还会影响其他事件,因为鼠标事件与其他事件是密不可分的关系。
只有在同一个元素上相继触发mousedown 和mouseup 事件,才会触发click 事件;如果mousedown 或mouseup 中的一个被取消,就不会触发click 事件。类似地,只有触发两次click 事件,才会触发一次dblclick 事件。如果有代码阻止了连续两次触发click 事件(可能是直接取消click事件,也可能通过取消mousedown 或mouseup 间接实现),那么就不会触发dblclick 事件了。这4个事件触发的顺序始终如下:

        (1) mousedown

        (2) mouseup

        (3) click

        (4) mousedown

        (5) mouseup

        (6) click

        (7) dblclick

显然,click 和dblclick 事件都会依赖于其他先行事件的触发;而mousedown 和mouseup 则不受其他事件的影响。
IE8 及之前版本中的实现有一个小bug,因此在双击事件中,会跳过第二个mousedown 和click事件,其顺序如下:

       (1) mousedown

       (2) mouseup

       (3) click

       (4) mouseup

       (5) dblclick

滚轮事件:

       IE 6.0 首先实现了mousewheel 事件。此后,Opera、Chrome 和Safari 也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(无论向上还是向下),就会触发mousewheel事件。这个事件可以在任何元素上面触发,最终会冒泡到document(IE8)或window(IE9、Opera、Chrome 及Safari)对象。与mousewheel 事件对应的event 对象除包含鼠标事件的所有标准信息外,还包含一个特殊的wheelDelta 属性。当用户向前滚动鼠标滚轮时,wheelDelta 是120 的倍数;当用户向后滚动鼠标滚轮时,wheelDelta 是120 的倍数。

将mousewheel 事件处理程序指定给页面中的任何元素或document 对象,即可处理鼠标滚轮的交互操作。

EventUtil.addHandler(document, "mousewheel", function(event){  
    event = EventUtil.getEvent(event);  
    alert(event.wheelDelta);  
});  

 这个例子会在发生mousewheel 事件时显示wheelDelta 的值。多数情况下,只要知道鼠标滚轮滚动的方向就够了,而这通过检测wheelDelta 的正负号就可以确定。

有一点要注意:在Opera 9.5 之前的版本中,wheelDelta 值的正负号是颠倒的。如果你打算支持早期的Opera 版本,就需要使用浏览器检测技术来确定实际的值,如下面的例子所示。

<!DOCTYPE html>
<html>
<head>
    <title>MouseWheel Event Example</title>
    <script type="text/javascript" src="/upload/files/201702/client.js"></script>
    <script type="text/javascript" src="/upload/files/201702/EventUtil.js"></script>
</head>
<body>
    <div id="myDiv">Try scrolling your mouse wheel (IE, Safari, and Opera).</div>
    <script type="text/javascript">
        EventUtil.addHandler(document, "mousewheel", function(event){
            event = EventUtil.getEvent(event);
            var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
            alert(delta);
        });

    </script>
</body>
</html>

触摸设备:

iOS 和Android 设备的实现非常特别,因为这些设备没有鼠标。在面向iPhone 和iPod 中的Safari开发时,要记住以下几点。

       不支持dblclick 事件。双击浏览器窗口会放大画面,而且没有办法改变该行为。

       轻击可单击元素会触发mousemove 事件。如果此操作会导致内容变化,将不再有其他事件发生;

如果屏幕没有因此变化,那么会依次发生mousedown、mouseup 和click 事件。轻击不可单击的元素不会触发任何事件。可单击的元素是指那些单击可产生默认操作的元素(如链接),或者那些已经被指定了onclick 事件处理程序的元素。

       mousemove 事件也会触发mouseover 和mouseout 事件。

       两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel 和scroll 事件。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics