javascript - jquery hover中嵌套mouseenter,mouseenter函数执行多次,敬请告知一下原理
PHP中文网
PHP中文网 2017-04-10 15:38:47
[JavaScript讨论组]

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

代码:




    
    test
    
    


    
行政学院 +
张三
李四
王五
PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(2)
天蓬老师

每次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 都会绑定一次事件。事件绑定是增量关系,不是替换关系,所以你懂的

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号