mouseenter 和 mouseout 的区别

最新推荐文章于 2024-09-12 16:31:59 发布

原创最新推荐文章于 2024-09-12 16:31:59 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

6 篇文章

订阅专栏

本文详细解释了mouseover与mouseenter两种鼠标事件的区别。通过实例演示了当鼠标指针在元素及其子元素上移动时，这两种事件的不同触发行为。

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

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

简单来说:
mouseover , div里面有子元素的话,在父子元素间鼠标来回滑过,都会去触发mouseover事件

mouseenter, div里面不管有无子元素,在标签内滑动只会触发一次,除非移出范围重新移入

<html>  
<head>  
<script src="http://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></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>