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

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

a602482790

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

阅读量827

点赞数 1

分类专栏：编程学习记录

编程学习记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、mouseover与mouseenter

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

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

简单写个例子：

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

效果:

2、mouseout与mouseleave

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

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

简单写个例子：

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

a602482790

关注

1
点赞
踩
2

收藏

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

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

扫一扫