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

开发者社区> 问答> 正文

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

2016-03-26 11:42:57 2772 1

我已知晓在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>
取消 提交回答
全部回答(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
相关问答

1

回答

jupyter notebook中R语言包bigrquery是什么?

2021-12-02 20:19:39 177浏览量 回答数 1

1

回答

Java HashMap clone() 方法的语法是什么?

2021-11-19 15:50:40 80浏览量 回答数 1

1

回答

java web程序在HttpSession中存储了很多较大的对象,会对Server性能有什么影响?

2021-11-06 08:58:24 206浏览量 回答数 1

1

回答

JavaScript(或jQuery)如何选择一个class为menu的容器呀?

2021-11-02 19:50:38 320浏览量 回答数 1

1

回答

jquery提供的哪个函数可以实现与Nodejs中async.map函数一样的功能?

2016-07-13 11:39:42 1670浏览量 回答数 1

1

回答

jquery clone()函数问题

2016-07-08 14:54:56 1329浏览量 回答数 1

1

回答

sql语句多表查询中聚合函数的使用问题

2016-06-13 13:32:40 2527浏览量 回答数 1

1

回答

js/jquery中绑定的click事件只执行一次,不重复执行,再次点击没有效果

2016-06-06 10:28:00 9899浏览量 回答数 1

1

回答

jquery获取tr value的值

2016-05-27 10:00:27 2188浏览量 回答数 1

4

回答

热点centos-Hot-java1.1.5【jsp】环境一键安装包提供下,载附resin多站点教程

2015-07-06 19:37:41 13273浏览量 回答数 4
2709
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载