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

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-03-26 11:42:57 2798 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

回答

jQuery源码上的一个函数isArrayLike()

2016-07-12 10:16:58 1481浏览量 回答数 1

1

回答

jquery 多次ajax请求导致浏览器崩溃 400 请求报错 

2020-05-30 17:30:38 452浏览量 回答数 1

1

回答

如何用JS或jQuery 监控/获知 到ajax 请求的产生?? 400 报错

2020-05-30 21:03:50 375浏览量 回答数 1

1

回答

jquery ajax()请求图片,再转码为base64进行显示,不可以吗?求大神指教 400 请求

2020-05-29 15:18:40 527浏览量 回答数 1

1

回答

用jquery ajax发送下载文件请求到后台不可以下载吗? 400 请求报错 

2020-05-29 22:57:12 372浏览量 回答数 1

1

回答

jquery ajax从一个网站向另一个网站请求,怎么实现? 400 请求报错 

2020-05-29 23:22:53 334浏览量 回答数 1

1

回答

jquery ajax 跨域请求后,同步设置会无效,求设置同步的方法 - jquery报错

2020-05-29 23:36:58 401浏览量 回答数 1

1

回答

如何使用jQuery / AJAX和PHP / MySQL根据选择的第一个下拉列表填充第?mysql

2020-05-17 14:23:46 258浏览量 回答数 1

1

回答

jquery中的ajax的请求出现问题

2016-07-14 16:58:18 2038浏览量 回答数 1

1

回答

jquery mobile ajax 请求,弹出提示框

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