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 在鼠标划出时触发一次。