mouseenter 与mouseover 区别
mouseenter与mouseover有什么不同,也许可以从两方面去讲。看他们是是否支持冒泡或者是否为事件的触发时机;
只有当鼠标指针在对象的边界之外,用户把鼠标移动到对象的边界内时,事件mouseenter才触发。如果鼠标当时正在边界内,用户想要触发该事件,需要把鼠标移动到对象边界外再移动到边界内。 因此,mouseenter不支持事件冒泡,所以导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件,但是却不会触发mouseenter和mouseleave事件。
小栗子:
演示:
演示代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.3.1.js"></script>
<style>
div{
width: 200px;
height: 160px;
float: left;
border: 1px solid hotpink;
margin: 10px 10px;
}
</style>
</head>
<body>
<script>
$(function () {
let tep1=0;
let tep2=0;
$("#dv1>p").mouseover(function () {
$(tep1+=1);
$("#dv1>p").text(tep1);
});
$("#dv1").mouseover(function () {
$(tep1+=1);
$("#dv1>p").text(tep1);
});
$("#dv2>p").mouseenter(function () {
$(tep2+=1);
$("#dv2>p").text(tep2);
});
$("#dv2").mouseenter(function () {
$(tep2+=1);
$("#dv2>p").text(tep2);
});
});
</script>
<div id="dv1"><p style="background-color: pink;">()</p></div>
<div id="dv2"><p style="background-color: pink;">()</p></div>
</body>
</html>