Jquery mouseenter（）vs mouseover（）

所以在阅读最近回答的问题后，我不清楚我是否真正理解了mouseenter()和mouseover()之间的区别。 该帖子说

鼠标移到（）：

在进入一个元素时，只要元素内出现任何鼠标移动，就会触发。

的MouseEnter（）：

将进入一个元素将触发。

我想出了一个小提琴 ，他们似乎很相似。 有人可以向我解释两者之间的区别吗？

我也尝试阅读JQuery定义，都说同样的事情。

当鼠标指针进入元素时，mouseover事件被发送到一个元素

当鼠标指针进入元素时，mouseenter事件被发送到一个元素。

有人可以请示例澄清？

Answer 1

当目标元素包含子元素时，您会看到该行为：

http://jsfiddle.net/ZCWvJ/7/

每次您的鼠标进入或离开一个子元素， mouseover触发，但不是mouseover 。

Answer 2

这是我发现的最好的例子之一：

• 的mouseenter
• 鼠标移到
• 鼠标移开
• 鼠标离开

http://bl.ocks.org/mbostock/5247027

Answer 3

尽管它们的操作方式相同，但只有当鼠标指针进入所选元素时才会触发 mouseenter事件。 如果鼠标指针也进入任何子元素，则会触发mouseover事件。

Answer 4

查看jQuery文档页面底部的示例代码和演示：

http://api.jquery.com/mouseenter/

鼠标指针移动到子元素时触发，而mouseenter仅在指针移动到绑定元素时触发。

Answer 5

mouseenter事件与处理事件冒泡的方式不同 。 mouseenter事件只在鼠标进入绑定的元素时触发其处理程序， 而不是后代 。 请参阅： https ： //api.jquery.com/mouseenter/

mouseleave事件与处理事件冒泡的方式不同 。 mouseleave事件只在鼠标离开绑定元素时触发其处理程序， 而不是后代 。 请参阅： https ： //api.jquery.com/mouseleave/

Answer 6

这个例子演示了mousemove ， mouseenter和mouseover事件的区别：

https://jsfiddle.net/z8g613yd/

HTML：

 <div onmousemove="myMoveFunction()"> <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p> </div> <div onmouseenter="myEnterFunction()"> <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p> </div> <div onmouseover="myOverFunction()"> <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p> </div> 

CSS：

 div { width: 200px; height: 100px; border: 1px solid black; margin: 10px; float: left; padding: 30px; text-align: center; background-color: lightgray; } p { background-color: white; height: 50px; } p span { background-color: #86fcd4; padding: 0 20px; } 

JS：

 var x = 0; var y = 0; var z = 0; function myMoveFunction() { document.getElementById("demo").innerHTML = z += 1; } function myEnterFunction() { document.getElementById("demo2").innerHTML = x += 1; } function myOverFunction() { document.getElementById("demo3").innerHTML = y += 1; } 

• onmousemove ：每当鼠标指针移到div元素上时发生。
• onmouseenter ：只有当鼠标指针进入div元素时才会发生。
• onmouseover ：当鼠标指针进入div元素及其子元素（p和span）时发生。