浅谈JQ中mouseover和mouseenter的区别

发布网友发布时间：2022-04-19 20:11

共2个回答

懂视网时间：2022-04-24 02:11

大家都熟悉mouseout 和 mouseover事件，就是鼠标移出和鼠标掠过事件，但是还是有部分人不知道在有子元素的情况下，同时还会鼠标的移出和掠过子元素的时候都会在中再一次触发。可以看个例子：

<html><head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=GBK" /> 
 
<title>mouseout子元素的触发</title> 
 
<script type="text/javascript" src="jquery.min.js"></script> 

<style>
 #list{width:100px;padding:10px;border:1px solid #ccc;background:#FFF;}

 #list ul{margin:0;padding:0;background:#333;}

 #list ul li{list-style:none;margin-bottom:5px;}

 #list ul li a:hover{background:#666;color:#FFF;}

 </style>

</head> 
 
<body> 
 
<a href="#" id="showList">鼠标请过来</a> 
 
<div id="list" style="display:none;"> 
 
 <ul> 
 
 <li><a href="#">选项一</a></li> 
 
 <li><a href="#">选项二</a></li> 
 
 <li><a href="#">选项三</a></li> 
 
 <li><a href="#">选项四</a></li> 
 
 <li><a href="#">选项五</a></li> 
 
 </ul> 
 
</div> 
 
</body> 
 
<script type="text/javascript"> 
 
 $("#showList").bind("mouseover",function(){ 
 
 $("#list").toggle('fast'); 
 
 }); 
 
 
 
 $("#list").bind("mouseout",function(){ 
 
 $(this).slideUp('fast'); 
 
 });
 
</script> 
 
</html>

这个例子原意是想打开一个列表框然后选择一个选项。鼠标移开列表框的时候关闭，但是事实情况是鼠标只要移上列表框就关闭。原因就是，列表绑定了一个mouseout事件，因为该列表有很多子元素，所以同意会触发ul，li，的鼠标掠过事件，也就是说，当鼠标移出ul，li的时候同样会触发mouseout事件。

解决的方法有多种，本文就是用jquery对应的两个事件，mouseenter 和 mouseleave，

只要把mouseout事件名改成mouseleave，就大功告成了。嘿嘿，简单！jquery都想到了。^_^,

Mouseleave ：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。例子

MouseEnter ：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

热心网友时间：2022-04-23 23:19

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave

这样的话，mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。

[html] view plain copy
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.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>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<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>
</body>
</html>