jquery hover中嵌套mouseenter，mouseenter函数执行多次的问题解决方案

Posted 2020-11-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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-1.12.3.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解绑。请看如下代码：

单独绑定

 $(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‘);
    });
});

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>

原文地址：https://yq.aliyun.com/ask/18480

以上是关于jquery hover中嵌套mouseenter，mouseenter函数执行多次的问题解决方案的主要内容，如果未能解决你的问题，请参考以下文章

Hover/mouseenter 事件反复触发 jQuery UI 的“动画”

Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别