<head>
<style>
.enter h2{
border:1px solid;
background: white;
position: absolute;
top: 200px;
}
.enter{
border:1px solid;
background: #eee;
width: 500px;
height: 100px;
}
</style>
<script type="text/javascript" src="jquery/jquery-3.2.1.js"></script>
</head>
<body>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<p class="enter">
<h2 >被触发的 Mouseenter 事件：<span></span></h2>
</p>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("p.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</body>
When I use absolute positioning to move the child element below, the event will also be triggered when passing through the child element. What's going on?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Absolute positioning only removes elements from the normal flow and does not change the structure of the document tree, so the child elements are still considered to be inside the parent element.
The solution can be to determine whether event.target is a child element, or to bind mouseover to both and then stopPropagation in the child element.
Based on https://www.w3.org/TR/uievent...
The translation is:
So the answer to your question is that it is stipulated by others that moving to descendants will also trigger mouseenter