使用 mouseenter、mouseleave 解决鼠标移到内层元素触发事件的问题

作者:vkvi 来源:ITPOW(原创) 日期:2020-12-22

假如有外层元素 p,其内有内层元素 s。我们现在希望的是:

鼠标仅在移入、移出 p 时触发事件,在移入、移出 s 时,不触发事件。

如果我们对 p 绑定 mouseover、mouseout 则不能简单地实现上述需求,因为在移入、移出 s 时,因为冒泡,也会触发 p 的事件。

使用 mouseentermouseleave 则可轻松实现。

更深入一步

(代码灵感来自网上)

<html>

<head>
<style type="text/css">
	div { margin:100px; padding:0 100px; width:100px; height:100px; background:red; }
	div div { margin:0; padding:0; background:green; }
</style>
</head>

<body>

<div id="parent">
	<div id="son"></div>
</div>
<script>
window.onload = function() {
	let parent = document.getElementById("parent");
	parent.addEventListener("mouseenter", ()=>console.log("p Enter"));
	parent.addEventListener("mouseleave", ()=>console.log("p Leave"));
	parent.addEventListener("mouseover", ()=>console.log("p Over"));
	parent.addEventListener("mouseout", ()=>console.log("p Out"));
	
	let son = document.getElementById("son");
	son.addEventListener("mouseenter", ()=>console.log("s Enter"));
	son.addEventListener("mouseleave", ()=>console.log("s Leave"));
	son.addEventListener("mouseover", ()=>console.log("s Over"));
	son.addEventListener("mouseout", ()=>console.log("s Out"));
}
</script>

</body>

</html>

使用 mouseenter、mouseleave 解决鼠标移到内层元素触发事件的问题

 当鼠标由左向右滑动时,触发事件如下:

使用 mouseenter、mouseleave 解决鼠标移到内层元素触发事件的问题

 可以看出:

  • Enter、Leave 只针对本元素边缘,不涉及内层元素。

  • Over 先于 Enter 触发。我们改变事件绑定顺序,也是如此。

移入内层元素时,依次触发:

  • 外层 Out

  • 内层 Over

  • 外层 Over(冒泡)

  • 内层 Enter

移出内层元素时,依次触发:

  • 内层 Out

  • 外层 Out(冒泡)

  • 内层 Leave

  • 外层 Over


相关文章