鼠标控制事件和鼠标中心事件有什么区别?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (25)

我一直使用mouseover事件,但是在阅读jQuery文档时,我找到了mouseenter。它们的作用似乎完全相同。这两者之间有什么区别吗?如果是的话,我应该在什么时候使用它们呢?(也适用于鼠标退出与鼠标退出)

提问于
用户回答回答于

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>

简而言之,会注意到,当您处理一个元素时,鼠标超过事件就会发生-来自它的子元素或父元素,但是只有当鼠标从该元素外部移动到该元素时,才会发生鼠标Enter事件。

.mouseover()会因事件冒泡而引起许多头痛。例如,当鼠标指针在本例中的内部元素上移动时,将向其发送一个mouseover事件,然后将其传输到外层。这可能会在不合适的时候触发绑定鼠标处理程序。见讨论.mouseenter()一个有用的替代方案。

用户回答回答于

老鼠和老鼠不会对事件冒泡作出反应,而是鼠标移动直接做

扫码关注云+社区