mouseover(鼠標覆蓋)
mouseenter(鼠標進入)
二者的本質區別在於,mouseenter不會冒泡,簡單的說,它不會被它本身的子元素的狀態影響到.但是mouseover就會被它的子元素影響到,在觸發子元素的時候,mouseover會冒泡觸發它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)
共同點:當二者都沒有子元素時,二者的行為是一致的,但是二者內部都包含子元素時,行為就不同了.
貼出代碼:
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="UTF-8">
-
<title>
</title>
-
<script type="text/javascript" src="js/jquery.min.js">
</script>
-
<style>
-
.div1,
-
.div2,
-
.div3,
-
.div4 {
-
width:
200px;
-
height:
200px;
-
}
-
-
.div1 {
-
background: darkcyan;
-
}
-
-
.div2 {
-
background: violet;
-
}
-
-
.div3 {
-
background: darkgray;
-
}
-
-
.div4 {
-
background: darkgreen;
-
}
-
-
p {
-
width:
110px;
-
height:
100px;
-
background: aquamarine;
-
margin:
0 auto;
-
}
-
</style>
-
<script>
-
x =
0;
-
y =
0;
-
z =
0;
-
w =
0;
-
-
$(
function() {
-
$(
".div1").on(
"mouseenter",
function() {
-
$(
"#s1").text(x +=
1)
-
})
-
$(
".div2").on(
"mouseover",
function() {
-
$(
"#s2").text(y +=
1)
-
})
-
$(
".div2").on(
"mouseover",
function() {
-
$(
"#s2").text(y +=
1)
-
})
-
$(
".div3").on(
"mouseenter",
function() {
-
$(
"#s3").text(z +=
1)
-
})
-
$(
".div4").on(
"mouseover",
function() {
-
-
$(
"#s4").text(w +=
1)
-
})
-
})
-
</script>
-
</head>
-
-
<body>
-
<div class="div1">
-
div1沒有子元素(mouseenter)
-
</div>
-
<span id="s1">
</span>
-
<div class="div2">
-
div2沒有子元素(mouseover)
-
</div>
-
<span id="s2">
</span>
-
<div class="div3">
-
<p id="p1"> div3有子元素p(mouseenter)
</p>
-
</div>
-
<span id="s3">
</span>
-
<div class="div4">
-
<p id="p2">div4有子元素p(mouseover)
</p>
-
</div>
-
<span id="s4">
</span>
-
</body>
-
-
</html>
先測試一下div1和div2都是沒有子元素的情況,看下面動圖
可以看到當div沒有子元素的時候,兩者在鼠標覆蓋或者進入的時候行為一樣.
接下來看一下有子元素的div3和div4,如下動圖
可以看到在有子元素的div3在mouseenter也不會觸發div3
但是div4就會被在它的子元素被覆蓋的時候被觸發了,也就是產生了冒泡
最后注意:mouseenter就是在想要阻止冒泡事件發生的時候使用
把代碼復制復制粘貼下來自己測試一下就明白了,不過注意: jquery需要的包你需要引入,不然是沒有效果的.
代碼下載鏈接: 代碼鏈接