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-1.12.3.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>
问题在于，代码执行后。当鼠标移动的时候，代码即执行。
与我们想要的，当鼠标进入后，内部不执行的效果不一致。
每次mouseenter的时候，都会给dd增加绑定事件，绑定事件是不会被覆盖的，而是会按照绑定先后顺序执行，所以就会执行很多次，event.stopPropagation是阻止冒泡，不会阻止同一个节点上的其他事件。
题主一可以把给dd的绑定事件独立于hover之外，二是可以在hover结束后给dd解绑。请看如下代码：
单独绑定
$(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');
});
});
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>
原文地址：https://yq.aliyun.com/ask/18480
