小编典典

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

javascript

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

两者之间有区别吗?如果是,我什么时候应该使用它们?
(也适用于mouseoutvs mouseleave)。


阅读 532

收藏
2020-04-25

共1个答案

小编典典

您可以从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()有用的替代方法,请参见讨论。

2020-04-25