mouseover和mouseenter的区别

最新推荐文章于 2026-01-01 17:43:06 发布

转载最新推荐文章于 2026-01-01 17:43:06 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shenq/p/6702429.html

文章标签：

#javascript #ViewUI

本文通过一个简单的HTML示例介绍了mouseover和mouseenter事件的区别。通过实际代码演示了这两种事件触发的效果及应用场景，帮助读者理解何时使用哪种事件。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="checkbox" />
<div style="width: 100px;height: 200px;background-color: #000;display: block;" id="href">
    <p>josjofiosj ofsdjfdsjfks</p>
    <a href="javascript:void(0)" id="" style="width: 100px;height: 100px;background-color: #ff0000;display: block;">1</a>
</div>

<script>
 
    window.onload = function() {
        var href = document.getElementById('href');
        href.addEventListener('mouseover',function() {
            var i = 0;
 
            href.getElementsByTagName("a")[0].text = parseInt(href.getElementsByTagName("a")[0].text) + 1;
        })
    }
</script>
</body>
</html>

　　mouseover是在指定元素和子元素都会执行，而mouseenter只有在指定元素下执行有作用

转载于:https://www.cnblogs.com/shenq/p/6702429.html