jquery hover中嵌套mouseenter,mouseenter函数执行多次,什么原理-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

jquery hover中嵌套mouseenter,mouseenter函数执行多次,什么原理

小旋风柴进 2016-03-26 11:42:57 1582

我已知晓在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>
JavaScript API Windows
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:15:59

    每次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>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程