JavaScript中事件冒泡问题

最新推荐文章于 2025-08-15 09:01:53 发布

湖心亭看雪

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量746

点赞数

分类专栏： html+css javascript 文章标签： javascript 事件方法

html+css 同时被 2 个专栏收录

2 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文通过实例介绍了如何在JavaScript中阻止事件冒泡。演示了当鼠标悬停在元素上时，如何仅触发当前元素的事件处理程序而不向上冒泡到父元素。

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

JavaScript中事件冒泡问题

问题：在JavaScript中，如果一个子节点有onmouseover()监听事件，而其父节点也有一个onmouseover()监听事件，你会发现当你将鼠标放在子节点上时，不光子节点的onmouseover方法执行了，其父节点的onmouseover方法也执行了。那么怎么样才能让鼠标位于子节点上时，其父节点的onmouseover方法不执行呢？

请看如下代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JS事件冒泡</title>
<style type="text/css">
    div *{margin:5px; padding:5px; border:3px solid white; display:block;}
    textarea{margin:15px; width:1000px; height:50px;}
    ul{background-color:#00A2E8}
    li{background-color:#22B14C;}
    a{background-color:#FFC90E;}
    span{background-color:#000000;}
</style>
</head>
<body>
<h1>Bubble in JavaScript</h1>
<p>DOM树的结构:</p>
<pre>
    <code>
        ul
            -li
                -a
                    -span
    </code>
</pre>
<p>一.不停止冒泡</p>
<div>
    <ul>
        <li>
            <a href="#"><span>Bubble!!!!!</span></a>
        </li>
        <li>
            <a href="#"><span>Bubble!!!!!</span></a>
        </li>
    </ul>
</div>
<p>二.停止冒泡</p>
<div>
    <ul>
        <li>
            <a href="#"><span>Don't Bubble!!!!!</span></a>
        </li>
        <li>
            <a href="#"><span>Don't Bubble!!!!!</span></a>
        </li>
    </ul>
</div>
<textarea id="textarea_log">
</textarea>
<script type="text/javascript">
window.onload = function(){
    var textarea_log = document.getElementById("textarea_log");
    var all_1 = document.getElementsByTagName("div")[0].getElementsByTagName("*");
    for(var i=0;i<all_1.length;i++){
        all_1[i].onmouseover = function(e){
            this.style.border ="3px solid red";
            textarea_log.value = "鼠标现在进入的是："+this.nodeName;
        };
        all_1[i].onmouseout = function(e){
            this.style.border = "3px solid white";
            textarea_log.value = "";
        };
    }
    var all_2 = document.getElementsByTagName("div")[1].getElementsByTagName("*");
    for(var i=0;i<all_2.length;i++){
        all_2[i].onmouseover = function(e){
            this.style.border = "3px solid red";
            if(e){
                e.stopPropagation();
            }else{
                window.event.cancelBubble = true;
            }
            textarea_log.value = "鼠标现在进入的是:"+this.nodeName;
        };
        all_2[i].onmouseout = function(e){
            this.style.border = "3px solid white";
            textarea_log.value = "";
        };
    }
}
</script>
</body>
</html>

我的Demo代码里面展示了两种情况。设置事件不冒泡的代码：

if(e){
e.stopPropagation();
}else{
    window.event.cancelBubble = true;
}