<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>
当我用绝对定位把子元素移到下面,这时穿过子元素也会触发事件,这是怎么回事?
absolute positioning 只是将元素抽离了 normal flow ,并没有改变 document tree 的结构,所以子元素依然算是在父元素里面。
解决方法可以是判断 event.target 是不是子元素,或者改为给两者绑定 mouseover 然后在子元素里 stopPropagation 。
根据https://www.w3.org/TR/uievent...
翻译一下就是:
所以对于你的问题,回答就是,移到后代上也会触发mouseenter是人家规定了的