简述在IE下mouseover和mouseenter的区别

最新推荐文章于 2022-04-30 13:06:45 发布

转载最新推荐文章于 2022-04-30 13:06:45 发布 · 1.4k 阅读

js 专栏收录该内容

48 篇文章

订阅专栏

本文通过两个实例详细对比了mouseover与mouseenter事件的区别。当元素不含子元素时，两者行为相似；若有子元素，前者会因鼠标经过子元素多次触发，后者仅在首次进入时触发。

栗子一：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

x=0;

y=0;

$(document).ready(function(){

  $("div.over").mouseover(function(){

    $(".over").text(x+=1);

  });

  $("div.enter").mouseenter(function(){

    $(".enter").text(y+=1);

  });

});

</script>

<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">

mouseover 事件：

</div>

<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">

mouseenter 事件：

</div>

从上面的栗子可以看到，当绑定着两个事件的元素里面没有子元素的时候，这两个事件的触发效果是一致的。

栗子二：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

x=0;

y=0;

$(document).ready(function(){

  $("div.over").mouseover(function(){

    $(".over span").text(x+=1);

  });

  $("div.enter").mouseenter(function(){

    $(".enter span").text(y+=1);

  });

});

</script>

<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">

<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>

</div>

<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">

<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>

</div>