理解mouseover,mouseout,mouseenter,mouseleave

最新推荐文章于 2022-09-21 16:07:32 发布

weixin_33912453

最新推荐文章于 2022-09-21 16:07:32 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hutuzhu/p/3725641.html

本文详细解释了JavaScript中的mouseover和mouseenter事件的区别，包括它们的定义、用法和触发条件。通过实例展示了如何在父子元素间利用这两个事件进行操作，并探讨了在特定布局情况下mouseenter与mouseover行为的相似性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mouseover定义和用法

当鼠标指针位于元素上方时，会发生 mouseover 事件。

该事件大多数时候会与 mouseout 事件一起使用。

mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数。

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

 <div class="parent">父亲
            <div class="child">儿子<span></span></div>
</div>

<script type="text/javascript">
             $(function(){
                 var x=1;
                 $(".parent").mouseover(function(){
                     $(".parent span").text(++x);
                 });
                  $(".parent").mouseout(function(){
                     $(".parent span").text(++x);
                 });
             });
</script>

当鼠标在父亲容器和父亲外容器之间切换时里面的值每次只会加1，当鼠标在父亲容器和儿子容器之间切换时，里面的值每次会加2，因为不论鼠标指针穿过被选元素或其子元素都会触发mouseover，mouseout同理。

mouseenter定义和用法

当鼠标指针穿过元素时，会发生 mouseenter 事件。

该事件大多数时候会与 mouseleave 事件一起使用。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。

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

<script type="text/javascript">
             $(function(){
                 var x=1;
                 $(".parent").mouseenter(function(){
                     $(".parent span").text(++x);
                 });
                  $(".parent").mouseleave(function(){
                     $(".parent span").text(++x);
                 });
             });
</script>

只有当鼠标经过父亲容器的时候才会触发，经过儿子容器是没有反应的，mouseleave同样，只有离开父亲容器的时候才会促发。

但是有个问题，当用绝对定位让儿子容器偏离父亲元素的覆盖面积时，效果上mouseenter跟mouseover情况一样了：

<style type="text/css">
            .parent{
                position: relative;
                width:150px;
                height:150px;
                background: red;
            }
            .child{
                position: absolute;
                top:160px;
                left:160px;
                width:100px;
                height:100px;
                background: yellow;
            }
 </style>

<script type="text/javascript">
             $(function(){
                 var x=1;
                 $(".parent").mouseenter(function(){
                     $(".parent span").text(++x);
                 });
                  $(".parent").mouseleave(function(){
                     $(".parent span").text(++x);
                 });
             });
</script>