jquery hover中嵌套mouseenter，mouseenter函数执行多次，敬请告知一下原理

我已知晓在jq中hover的API就是把mouseenter和mouseleave组合在一起来用的，在jq中实现hover:function(fnOver，fnOut){
return this.mouseenter(fnOver).mouseleave(fnOut||fnover)
}。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery.js"></script>
    <style>
    .unit-list{ width: 320px; border:1px solid #ccc;}
    .member-list dd{ background-color: #ccc; margin: 5px 0;}

    </style>
</head>
<body>
    <dl class="unit-list">
            <dt class="cf">行政学院
                <span class="toggle">+</span>
            </dt>
            <dd>
                <dl class="member-list">
                    <dd>张三</dd>
                    <dd>李四</dd>
                    <dd>王五</dd>
                </dl>
            </dd>
        </dl>



<script>
$(function(){
        $(".unit-list").hover(function(e){
            e.stopPropagation()
            console.log("E n t e r");
            $(".member-list dd").mouseenter(function(e){
                e.stopPropagation()
                console.log(this); //鼠标移出unit-list再移入到<dd>，输出次数会叠加
            });
        },function(){
            console.log("L e a v e");
        });
})
    
</script>


</body>
</html>

每次mouseenter的时候，都会给dd增加绑定事件，绑定事件是不会被覆盖的，而是会按照绑定先后顺序执行，所以就会执行很多次，event.stopPropagation是阻止冒泡，不会阻止同一个节点上的其他事件。

题主一可以把给dd的绑定事件独立于hover之外，二是可以在hover结束后给dd解绑。请看如下代码：

单独绑定

<script>
$(function(){
    $('.member-list dd').on('mouseenter',function(){
        console.log(this);
    });
    $('.unit-list').hover(function(){
        console.log('E n t e r');
    },function(){
        console.log('L e a v e');
    });
});
</script>

hover后撤销绑定

<script>
$(function(){
    var fMouseEnter = function(e){
        console.log(this);
    };
    var jDd = $('.member-list dd');
    $('.unit-list').hover(function(e){
        jDd.on('mouseenter',fMouseEnter);
        console.log('E n t e r');
    },function(){
        jDd.off('mouseenter',fMouseEnter);
        console.log('L e a v e');
    });
});
</script>

把 mouseenter 放外面去，你这样每次 hover 都会绑定一次事件。事件绑定是增量关系，不是替换关系，所以你懂的

【热门文章】