阻止事件冒泡

最新推荐文章于 2025-07-04 16:59:10 发布

键指江湖

最新推荐文章于 2025-07-04 16:59:10 发布

阅读量903

点赞数

CC 4.0 BY-SA版权

分类专栏：问题解决文章标签：阻止事件冒泡

本文链接：https://blog.youkuaiyun.com/ahui829/article/details/89538127

问题解决专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了使用原生JavaScript和jQuery来阻止事件冒泡的方法，包括如何通过设置cancelBubble为true以及使用event.stopPropagation()来避免事件向上级元素传播，同时展示了具体的代码实现。

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

阻止事件冒泡

div{
    width: 400px;
    height: 200px;
    background: gray;
}

<button id="oBtn">点击</button>
<div id="div" style="display: none"></div>

1.JavaScript·阻止事件冒泡

window.onload=function(ev)
    {
        var oBtn=document.getElementById("oBtn");
        var oDiv=document.getElementById("div");
        oBtn.onclick=function()
        {
            var oEvent=ev||event;
            oDiv.style.display='block';
            oEvent.cancelBubble=true

        };
        document.onclick=function()
        {
            oDiv.style.display='none';
        }
    };

2.jquery阻止事件冒泡

$(function(){
        $("#oBtn").on('click',function(event){
            $("#div").show();
            event.stopPropagation();
        });
        document.onclick=function(){
            $("#div").hide();
        }
    })