mouseover与mouseenter事件

最新推荐文章于 2023-01-10 14:13:13 发布

哇偶哇偶Z

最新推荐文章于 2023-01-10 14:13:13 发布

阅读量2.3k

点赞数

分类专栏： JS基础

本文链接：https://blog.csdn.net/ddwddw4/article/details/82965844

版权

JS基础专栏收录该内容

103 篇文章 1 订阅

订阅专栏

mouseover与moseenter很多情况下可以混用，但是他们是有区别的。

mouseover在当鼠标移入元素或其子元素的时候都会触发，是一个重复触发，冒泡的过程。见下面例子，一个父元素包含一个子元素，在其父元素内滑动鼠标，超出子元素的范围时，也会触发事件。

而mouseenter在鼠标移入元素本身以后，无论在元素内部如何移动，都不会再次触发。

mouseout与mouseleave同理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mouseover与mouseenter事件</title>
</head>
<style>
    #box{
        width: 100px;
        height: 200px;
        background: #ccc;
    }
    #box div{
        width: 100px;
        height: 100px;
        background: #B3CD57;
    }
</style>
<body>
<div id="box">
    <div>这是一个内容</div>
</div>
</body>
<script>
    var oBox = document.getElementById("box");
  /*  oBox.onmouseover = function(){
        console.log("移入");
    };
    oBox.onmouseout = function(){
        console.log("移出");
    };*/
    oBox.onmouseenter = function(){
        console.log("移入");
    };
    oBox.onmouseleave = function(){
        console.log("移出");
    };
</script>
</html>

哇偶哇偶Z

关注

0
点赞
踩
0

收藏

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

mouseover与moseenter很多情况下可以混用，但是他们是有区别的。 mouseover在当鼠标移入元素或其子元素的时候都会触发，是一个重复触发，冒泡的过程。见下面例子，一个父元素包含一个子元素，在其父元素内滑动鼠标，超出子元素的范围时，也会触发事件。而mouseenter在鼠标移入元素本身以后，无论在元素内部如何移动，都不会再次触发。mouseout与mouseleave同...
复制链接

扫一扫