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

jQuery常用的Mouse事件有7种，分别是：

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

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

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

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

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

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

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

mouseup 和 mousedown 没什么好解释的，主要说一下 mouseover 和 mouseenter ； mouseout 和 mouseleave 的区别。

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

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

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

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

我写了 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 分别用鼠标从下划入从上划出，在自上往下划，检查控制台打印的次数。

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

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

未经允许不得转载：w3h5 » JQuery几个mouse事件的区别和用法