码迷,mamicode.com
首页 > 其他好文 > 详细

鼠标事件

时间:2016-07-21 00:50:37      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

 

鼠标 与 滚轮事件

  DOM3级中定义了9个鼠标事件,简介如下

 

<body style="height:1500px;">
            <div style="width:200px;height: 200px; border:1px solid red" id="outer">
                    <div style="width:100px; height: 100px; border:1px solid green" id="inner">

                    </div>
            </div>

</body>

 

 

 不支持事件冒泡

  mouseenter

    鼠标从一个元素首次移动该元素范围时触发,该事件不冒泡,而且光标移动到后代元素上不会触发。  

  mouseleave

    鼠标从该元素离开时,触发该事件,该事件不冒泡,而且光标移动到后代元素上不会触发。   

这里说个题外话: jquery 的 hover 方法也是根据这两个事件来实现的,大家有时间可以看看

  

jQuery.fn.extend({
    hover: function( fnOver, fnOut ) {
        return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
    },

    bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
        return this.off( types, null, fn );
    },

    delegate: function( selector, types, data, fn ) {
        return this.on( types, selector, data, fn );
    },
    undelegate: function( selector, types, fn ) {
        // ( namespace ) or ( selector, types [, fn] )
        return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
    }
});

 

 

支持事件冒泡:

  

  mousemove

 

    当鼠标指针在元素内部移动时重复地触发(包括后代上),不能通过键盘触发这个事件。 

 

  click 

 

    在用户单击主鼠标按钮或者按下回车键时触发。

 

  dbclick

 

    用户双击主鼠标键时触发

 

 

  mouseout

    在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。 不能通过键盘触发这个事件。 

  mouseover

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

 

  mousedown

    当鼠标按下时触发该事件,不可通过键盘触发   支持

  mouseup

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

鼠标事件

标签:

原文地址:http://www.cnblogs.com/czhyuwj/p/5690046.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!