w3h5

JQuery几个mouse事件的区别和用法

jQuery常用的Mouse事件有7种,分别是:

  • mouseup:鼠标在元素上松开时触发 mouseup 事件。与 click 不同,只要鼠标在元素上松开即触发。

  • mousedown:鼠标在元素上并按下时触发 mousedown 事件。与 click 不同,只要鼠标在元素上按下即触发。

  • mouseover:当鼠标位于元素上时触发 mouseover 事件,通常与 mouseout 配合使用。

  • mouseenter:当鼠标位于元素上时触发 mouseenter 事件,通常与 mouseleave 配合使用。

  • mousemove:鼠标在元素上移动时触发 moudemove 事件。

  • mouseout:鼠标在元素上移开时触发 mouseout 事件。

  • mouseleave:鼠标在元素上移开时触发 mouseleave 事件。

mouseupmousedown 没什么好解释的,主要说一下 mouseovermouseentermouseoutmouseleave 的区别。

其实如果是一个单独的元素,也并看不出什么问题,而且我们也常用 mouseovermouseout 组合。

但是今天在写一个QQ在线客服插件时出现了问题,我写了一个 0.3秒 的动画效果,鼠标划入显示,划出隐藏,鼠标在上面移动时,插件不停地显示隐藏好多次。

原来这两个组合是由区别的,一个单独的元素时效果几乎是一样的,问题就在于它们的子元素。

mouseovermouseout 鼠标划入子元素,再次划入父元素时即再次触发,如果该元素包含子元素,鼠标在上面划动时即会触发多次。

我写了 7 个 div 标签,每个 div 标签内包含 3 个 p 标签,分别对应以上事件,触发时 console.log( ) 111、222 ...... 777。

HTML部分代码:

<div class="one">
    <p>mouseup</p>
    <p>mouseup</p>
    <p>mouseup</p>
</div>
<div class="two">
    <p>mousedown</p>
    <p>mousedown</p>
    <p>mousedown</p>
</div>
<div class="three">
    <p>mouseover</p>
    <p>mouseover</p>
    <p>mouseover</p>
</div>
<div class="four">
    <p>mouseenter</p>
    <p>mouseenter</p>
    <p>mouseenter</p>
</div>
<div class="five">
    <p>mousemove</p>
    <p>mousemove</p>
    <p>mousemove</p>
</div>
<div class="six">
    <p>mouseout</p>
    <p>mouseout</p>
    <p>mouseout</p>
</div>
<div class="seven">
    <p>mouseleave</p>
    <p>mouseleave</p>
    <p>mouseleave</p>
</div>

简单设置一下CSS,添加背景色:

div{
            width: 120px;
            float: left;
            margin: 10px;
            background: #5a5a5a;
        }
        p{
            height: 20px;
            width: 100px;
            margin: 10px;
            background: #3EBBB5;
            text-align: center;
            color: #FFF;
        }

js 代码如下:

$(function(){
            $('.one').mouseup(function(){
                console.log(111);
            })
            $('.two').mousedown(function(){
                console.log(222);
            })
            $('.three').mouseover(function(){
                console.log(333);
            })
            $('.four').mouseenter(function(){
                console.log(444);
            })
            $('.five').mousemove(function(){
                console.log(555);
            })
            $('.six').mouseout(function(){
                console.log(666);
            })
            $('.seven').mouseleave(function(){
                console.log(777);
            })
        })

点击事件就不演示了,3-7 分别用鼠标从下划入从上划出,在自上往下划,检查控制台打印的次数。

打印结果如下图, mouseovermouseout 在包含子元素的情况下会多次触发,mouseover 即使不包含子元素也会不断触发,mouseenter 在鼠标划入时触发一次,mouseleave 在鼠标划出时触发一次。

1.png JQuery几个mouse事件的区别和用法 经验总结

明天把QQ聊天插件发出来,先放链接:QQ聊天插件,鼠标划入划出显示隐藏效果。

赞 (0)
分享到: +More |

评论 沙发

换个身份