mouseover事件与mouseenter事件的区别

mouseover与mouseenter

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

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


mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

 

 1 <html>  
 2 <head>  
 3 <script type="text/javascript" src="/jquery/jquery.js"></script>  
 4 <script type="text/javascript">  
 5 x=0;  
 6 y=0;  
 7 $(document).ready(function(){  
 8   $("div.over").mouseover(function(){  
 9     $(".over span").text(x+=1);  
10   });  
11   $("div.enter").mouseenter(function(){  
12     $(".enter span").text(y+=1);  
13   });  
14 });  
15 </script>  
16 </head>  
17 <body>  
18 <p>不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。</p>  
19 <p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。</p>  
20 <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">  
21 <h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2>  
22 </div>  
23 <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">  
24 <h2 style="background-color:white;">被触发的 Mouseenter 事件:<span></span></h2>  
25 </div>  
26 </body>  
27 </html>  

 

posted @ 2017-06-19 14:27  ysx_小鱼  阅读(188)  评论(0编辑  收藏  举报