mouseover 和 mouseenter 事件有啥区别？

Posted 2023-02-21

【中文标题】mouseover 和 mouseenter 事件有啥区别？

【英文标题】：What is the difference between the mouseover and mouseenter events?mouseover 和 mouseenter 事件有什么区别？

【发布时间】：2010-11-09 09:56:02

【问题描述】：

我一直使用mouseover 事件，但是在阅读 jQuery 文档时我发现了mouseenter。它们的功能似乎完全相同。

两者之间有区别吗？如果有，我应该什么时候使用它们？ （也适用于mouseout vs mouseleave）。

【参考方案1】：

对于此类问题通常如此，Quirksmode 有the best answer。

我想，因为 jQuery 的目标之一是让浏览器不可知，使用任何一个事件名称都会触发相同的行为。 编辑：感谢其他帖子，我现在看到这是不是这样的

【参考方案2】：

Mouseenter 和 mouseleave 不对事件冒泡做出反应，而 mouseover 和 mouseout 会。

这是描述行为的article。

【讨论】：

这很好地解释了它：bl.ocks.org/mbostock/5247027 mouseover 每次从容器内触发时都会触发，因为事件冒泡。

【参考方案3】：

您可以从the jQuery doc 页面尝试以下示例。这是一个不错的小型交互式演示，它非常清晰，您可以亲眼看到。

var i = 0;
$("div.overout")
  .mouseover(function() 
    i += 1;
    $(this).find("span").text("mouse over x " + i);
  )
  .mouseout(function() 
    $(this).find("span").text("mouse out ");
  );

var n = 0;
$("div.enterleave")
  .mouseenter(function() 
    n += 1;
    $(this).find("span").text("mouse enter x " + n);
  )
  .mouseleave(function() 
    $(this).find("span").text("mouse leave");
  );

div.out 
  width: 40%;
  height: 120px;
  margin: 0 15px;
  background-color: #d6edfc;
  float: left;


div.in 
  width: 60%;
  height: 60%;
  background-color: #fc0;
  margin: 10px auto;


p 
  line-height: 1em;
  margin: 0;
  padding: 0;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

简而言之，您会注意到鼠标悬停事件发生在元素上方时 - 来自其子元素或父元素，但鼠标进入事件仅在鼠标从该元素外部移动到这个元素。

或者as the mouseover() docs说：

[.mouseover()] 会因为事件冒泡而引起很多麻烦。例如，在本例中，当鼠标指针移到 Inner 元素上时，将向该元素发送 mouseover 事件，然后滴流到 Outer。这会在不合时宜的时候触发我们绑定的鼠标悬停处理程序。请参阅.mouseenter() 的讨论以获取有用的替代方案。

【讨论】：

mouseenter“仅在鼠标从父元素移动到元素时发生”是不正确的。当鼠标从元素外部变为内部时，该事件发生。鼠标来自哪个元素并不重要。确实，鼠标经常来自父级，但并非总是如此。例如，如果父级没有填充或边框，那么鼠标可以直接从祖父级进入，mouseenter 仍然会触发。事实上，它甚至可以从视口外部进入元素（如果元素正好在边缘），事件仍然会触发。

DEMO 是最好的解释 ;)

真正的，只是玩演示。

【参考方案4】：

$(document).ready(function() 
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event)
console.log(event.type," :: ",this.id);)
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event)
console.log(event.type," :: ",this.id);)
 );

【讨论】：

如果您的元素没有子元素，但如果该元素确实有子元素，那么这些对的行为将完全不同。简而言之，如果你将鼠标传递给一个元素，然后再传递给它的子元素，mouseover/mouseout 都会触发，而只有 mouseenter 会触发，因为你的鼠标在技术上仍然在元素内。

我认为这里的事件名称是错误的。