mouseover与mouseenter的区别

更多时间：2014-6-28 类别：Web前端浏览量：325

mouseover与mouseenter的区别

mouseover与mouseenter的区别

对于mouseover事件来说，当鼠标从其他元素移动到 child节点时发生，但此事件会冒泡所以会导致 parent 也出发mouseover。如果我们对 parent注册了 mouseover监听，从 parent移动到child 同样出发parent的mouseover。

mouseenter 是不冒泡的事件，这时候如果注册的监听是mouseenter的话无论鼠标从任何元素移动到child时只有child元素发生mouseenter事件而其祖宗节点都不会因为冒泡而触发此事件。

一、mouseover与mouseenter的区别

Mouseover：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

Mouseenter：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

二、实例

HTML 代码复制


<html>
 
<head>
 
<script type="text/javascript" src="jquery的路径"></script>
 
<script type="text/javascript">...
 
x=0;
 
y=0;
 
$(document).ready(function()...{
 
$("li.over").mouseover(function()...{
 
$(".over span").text(x+=1);
 
});
 
$("li.enter").mouseenter(function()...{
 
$(".enter span").text(y+=1);
 
});
 
});
 
</script>
 
</head>
 
<body>
 
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>  
 
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>  
 
<li class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
 
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>  
 
</li>
 
<li class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
 
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>  
 
</li>
 
</body>
 
</html>

标签：mouseover mouseenter

上一篇：MVC中CheckBox

下一篇：SQL Server 批量导入数据的方法

您可能感兴趣

排行榜

1
mouseover与mouseenter的区别

mouseover与mouseenter的区别

mouseover与mouseenter的区别

热门推荐

排行榜