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.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
条回答
写回答
写回答
-
每次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>2019-07-17 19:15:59赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
