jQuery 中的 mouseenter 和 mouseover 的区别？

[sunshineHu]

什么是穿透？？？
首先来说说 mouseenter 和 mouseover 的相同点吧，二者都是鼠标划入事件，当鼠标划入指定的元素时就会触发事件。在所选元素没有子元素等嵌套元素的话，我觉得用 mouseenter 和 mouseover 都一样。
但是，不同的是：如果所选元素有嵌套的话， mouseover 可能就会被触发多次，而 mouseenter 则只会执行一次。因为只有在鼠标指针穿透该元素时才会触发 mouseenter 事件，而鼠标指针穿过任何子元素，都会触发 mouseover 事件。
For example ：

<style>
*{margin:0;padding:0;}
#outer{width:200px;height:200px;background:red;}
#inner{width:100px;height:100px;backgroud:blue;}
</style>

<script>
$("#outer").mouseenter(function(){
console.log(1);//控制台只会显示一次
})

$("#outer").mouseover(function(){
console.log(1);//鼠标移入显示一次，鼠标在子元素划过也会显示。
})
</script>
那么，问题来了，穿透！到底是什么意思？？？表示不太懂，求大神详解？？？

[sunshineHu]

<div id="outer">
<div id="inner"></div>
</div>
这是布局，不知道为什么显示不出来

[sunshineHu]

大神们帮我看看

[iamzuoxinyu]

搜一下“ js 冒泡机制”。

[noe132]

mouseenter 是定制版的 mouseover 。

子元素的 mouseover 会冒泡到父级元素和祖先元素，通常 情况下我们并不像捕捉到子元素的 mouseover 事件
所以有了 mouseenter 这个事件。只有触发元素和事件绑定的元素是同一个元素的时候， mouseenter 才会触发。
https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter

[linyongqianglal]

参考事件的冒泡和捕获