mouseover和mouseenter事件之间有什么区别？

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

两者之间有区别吗？如果是，我什么时候应该使用它们？

（也适用于mouseoutvs mouseleave）。

您可以从jQuery文档页面尝试以下示例。这是一个很好的互动演示，非常清晰，您可以自己看到。

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>

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

或者如mouseover()文档所述：

[ .mouseover()]会因事件冒泡而引起许多头痛。例如，在此示例中，当鼠标指针移到Inner元素上时，将向该元素发送mouseover事件，然后再向上移动到Outer。这可能会在不合时宜的时候触发绑定的鼠标悬停处理程序。有关.mouseenter()有用的替代方法，请参见讨论。

Mouseenter和mouseleave对事件冒泡不起作用，而mouseover和mouseout则起作用。

这是描述行为的文章。

像这样的问题通常如此，Quirksmode具有最佳答案。

~~我可以想象，由于jQuery的目标之一是使事物与浏览器无关，因此使用任一事件名称都将触发相同的行为。~~编辑：由于其他职位，我现在看到不是这种情况

$(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);})
 });

本文地址：http://javascript.askforanswer.com/mouseoverhemouseentershijianzhijianyoushenmequbie.html
文章标签：events , javascript , javascript-events , jquery
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载