mouseover 和 mouseenter 事件有什么区别? [英] What is the difference between the mouseover and mouseenter events?

问题描述

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

两者之间有区别吗，如果有，我应该什么时候使用它们?
(也适用于 mouseout 与 mouseleave).

解决方案

您可以尝试以下来自 thejQuery 文档 页面.这是一个很好的交互式小演示，非常清晰，您可以亲眼看到.

var i = 0;$("div.overout").鼠标悬停(功能(){我 += 1;$(this).find("span").text("mouse over x " + i);}).mouseout(功能(){$(this).find("span").text("mouse out");});无功n = 0;$("div.enterleave").mouseenter(功能(){n += 1;$(this).find("span").text("鼠标输入 x " + n);}).mouseleave(功能(){$(this).find("span").text("鼠标离开");});

div.out {宽度:40%；高度:120px；边距:0 15px；背景颜色:#d6edfc；向左飘浮;}div.in {宽度:60%；高度:60%；背景颜色:#fc0；边距:10px 自动；}p{行高:1em；边距:0；填充:0；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="out overout"><span>移动鼠标</span><div class="in">

<div class="out enterleave"><span>移动鼠标</span><div class="in">

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

或者 正如 mouseover() 文档 所说:><块引用>

[.mouseover()] 会因为事件冒泡而引起许多头痛.例如，当鼠标指针移动到本例中的 Inner 元素上时，将向该元素发送一个 mouseover 事件，然后向上传递到 Outer.这可能会在不合适的时候触发我们绑定的鼠标悬停处理程序.请参阅有关 .mouseenter() 的讨论以获取有用的替代方法.

I have always used the mouseover event, but while reading the jQuery documentation I found mouseenter. They seem to function exactly the same.

Is there a difference between the two, and if so when should I use them?
(Also applies for mouseout vs mouseleave).

解决方案

You can try out the following example from the jQuery doc page. It's a nice little, interactive demo that makes it very clear and you can actually see for yourself.

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>

In short, you'll notice that a mouse over event occurs on an element when you are over it - coming from either its child OR parent element, but a mouse enter event only occurs when the mouse moves from outside this element to this element.

Or as the mouseover() docs put it:

[.mouseover()] can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

这篇关于mouseover 和 mouseenter 事件有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！