【jQuery】mouseover與mouseenter的區別
阿新 • • 發佈：2018-12-23
mouseover與mouseenter的區別
請先看下面講解，文章最後有原始碼
頁面上有4個div，div2是div1的子元素，div4是div3的子元素
給 div1 綁定了mouseover() 和 mouseout() 事件監聽
給 div3 綁定了mouseenter()
頁面是這樣的
mouseover()與mouseout()
1.滑鼠進入 div1 時
2.當滑鼠進入div1的子元素 div2 時
控制檯輸出了 “mouseout離開” 這表示什麼？？？
表示進入div1的子元素div2時，觸發了離開div1的mouseout()事件，表示滑鼠指標暫時離開了div1，然後又觸發mouseover()滑鼠進入事件。mouseover()滑鼠進入事件觸發了兩次
mouseenter()與mouseleave()
1.當滑鼠進入div3時，控制檯輸出“用mouseenter進入”，表示滑鼠進入了div3觸發了mouseenter()事件
2.當滑鼠進入div3的子元素 div4 時 (注：黑色箭頭代表滑鼠指標)
控制檯並沒有變化，表示什麼？
表示進入div3的子元素div4時，並沒有觸發div3的mouseleave()離開事件，表示滑鼠指標並沒有離開了div3，
mouseenter()滑鼠進入事件觸發了一次。
區別顯而易見了吧
總結
mouseover(); 在滑鼠指標移入子元素時也會再次觸發, 對應mouseout();
mouseenter();滑鼠指標只有在移入當前元素時才觸發, 對應mouseleave();
頁面中該用哪種自己決定，如果都沒有子元素，那隨便用哪個方法。
對文章有什麼問題或者建議請大佬在評論區指出，或者聯絡QQ：675174745，歡迎打擾。
原始碼：(記得修改引入jQuery庫的路徑)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mouseover和mouseenter的區別</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: olive;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.div3 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 230px;
background: olive;
}
.div4 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: yellow;
}
.divText {
position: absolute;
top: 330px;
left: 10px;
}
</style>
<body>
<div class="divText">
區分滑鼠的mouseover和mouseenter事件
</div>
<div class="div1">
div1.....
<div class="div2">div2....</div>
</div>
<div class="div3">
div3.....
<div class="div4">div4....</div>
</div>
<!--
區別mouseover與mouseenter?
* mouseover: 在移入子元素時也會觸發, 對應mouseout
* mouseenter: 只在移入當前元素時才觸發, 對應mouseleave
hover()使用的就是mouseenter()和mouseleave()
-->
<script src="js/jquery-1.12.3.js" type="text/javascript"></script>
<script type="text/javascript">
//mouseover mouseout
$(".div1").mouseover(function() {
console.log("用mouseover進入")
});
$(".div1").mouseout(function() {
console.log("用mouseout離開")
});
//mouseenter mouseleave
$(".div3").mouseenter(function() {
console.log("用mouseenter進入")
});
$(".div3").mouseleave(function() {
console.log("用mouseleave離開")
});
</script>
</body>
</html>