jquery hover中嵌套mouseenter，mouseenter函數執行多次的問題解決方案
阿新 • • 發佈：2018-05-11
ctype iyu use api wid list rip FN urn
已知曉在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
jquery hover中嵌套mouseenter，mouseenter函數執行多次的問題解決方案