mouseover事件与mouseenter事件的区别

最新推荐文章于 2023-11-21 08:47:56 发布

根子的数据库

最新推荐文章于 2023-11-21 08:47:56 发布

阅读量363

点赞数

分类专栏： js 文章标签： javascript jqure js 鼠标指针

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

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

[html]view plaincopy 
   
 <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>  

根子的数据库

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mouseover事件与mouseenter事件的区别

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave这样的话，mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。[html] view plain copyhtml>
复制链接

扫一扫