JavaScript中的mouseover、mouseout 与 mouseenter，mouseleave的区别

最新推荐文章于 2022-05-05 11:26:54 发布

Amazinqc

最新推荐文章于 2022-05-05 11:26:54 发布

阅读量370

点赞数

文章标签： Javascript mouse 事件

原文链接：https://blog.csdn.net/u010297791/article/details/57412796

版权

笔记专栏收录该内容

47 篇文章 1 订阅

订阅专栏

1、mouseover与mouseenter

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

简单写个例子：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .over{
                background-color: #66d3ff;
                width:400px;
                float:left;
                padding: 10px 10px;
            }
            .enter{
                background-color: #66d3ff;
                width:400px;
                float:left;
                margin-left:30px;
                padding: 10px 10px;
            }
            h2{
                background-color: #fff;
                padding: 5px 5px;
            }
        </style>
    </head>
    <body>
    <p>mouseover 事件:不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
    <p>mouseenter 事件:只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
    <div class="over">
        <h2>被触发的 Mouseover 事件次数：<span></span></h2>
    </div>
    <div class="enter">
        <h2>被触发的 Mouseenter 事件次数：<span></span></h2>
    </div>
    <script>
        var x = 0,y = 0;
        var div1 = document.getElementsByClassName("over")[0];
        div1.addEventListener("mouseover",function(){
            var span = this.getElementsByTagName("span")[0];
            span.innerText = (x +=1);
        },false);
     
        var div2 = document.getElementsByClassName("enter")[0];
        div2.addEventListener("mouseenter",function(){
            var span = this.getElementsByTagName("span")[0];
            span.innerText = (y +=1);
        },false);
    </script>
    </body>
    </html>

效果:

可以看到，在鼠标进入over类元素（蓝色区域）及其子元素（白色区域）时都会触发mouseover事件，而在鼠标进入enter类元素时，只触发一次mouseenter事件，下面mouseout事件和mouseleave事件同理

2、mouseout与mouseleave

 mouseout事件：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
 mouseleave事件：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

简单写个例子：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .over{
                background-color: #66d3ff;
                width:400px;
                float:left;
                padding: 10px 10px;
            }
            .enter{
                background-color: #66d3ff;
                width:400px;
                float:left;
                margin-left:30px;
                padding: 10px 10px;
            }
            h2{
                background-color: #fff;
                padding: 5px 5px;
            }
        </style>
    </head>
    <body>
    <p> mouseout事件：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
    <p> mouseleave事件：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
    <div class="over">
        <h2>被触发的 mouseout 事件次数：<span></span></h2>
    </div>
    <div class="enter">
        <h2>被触发的 mouseleave 事件次数：<span></span></h2>
    </div>
    <script>
        var x = 0,y = 0;
        var div1 = document.getElementsByClassName("over")[0];
        div1.addEventListener("mouseout",function(){
            var span = this.getElementsByTagName("span")[0];
            span.innerText = (x +=1);
        },false);
     
        var div2 = document.getElementsByClassName("enter")[0];
        div2.addEventListener("mouseleave",function(){
            var span = this.getElementsByTagName("span")[0];
            span.innerText = (y +=1);
        },false);
    </script>
    </body>
    </html>

效果：

原文链接：https://blog.csdn.net/u010297791/article/details/57412796

Amazinqc

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的mouseover、mouseout 与 mouseenter，mouseleave的区别

1、mouseover与mouseenter mouseover事件：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。 mouseenter事件：只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。简单写个例子： <!DOCTYPE html> <html lang="en"> <head&g...
复制链接

扫一扫