取消事件冒泡

Posted 2020-08-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了取消事件冒泡相关的知识，希望对你有一定的参考价值。

下面我想实现的效果是点击按钮显示和隐藏div，点击document隐藏div。但是发现如果没有取消事件冒泡，点击按钮始终不会显示div，那是因为事件一层一层往上冒泡，最终去到document，直接执行了document上的点击事件。实际上不是没有显示出div，而是显示瞬间又执行了document的点击事件而隐藏了，因为速度太快人眼看不到，不妨可以在中间加alert(‘a‘);弹一个框出来暂停验证一下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
    width: 300px;
    height: 300px;
    background: #000;
    display: none;
}
</style>

</head>
<body>
<input id = "btn1" type = "button" value = "显示" />
<div id = "div1"></div>
<script type="text/javascript">
    var oBtn = document.getElementById(‘btn1‘);
    var oDiv = document.getElementById(‘div1‘);

    oBtn.onclick = function(ev){
        var oEvent = ev||event;
        if(oDiv.style.display == ‘none‘)
        {
            oDiv.style.display = ‘block‘;
        }
        else{
            oDiv.style.display = ‘none‘;
        }
        oEvent.cancelBubble = true;//取消事件冒泡
    }

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

</script>
</body>
</html>

以上是关于取消事件冒泡的主要内容，如果未能解决你的问题，请参考以下文章

javascript 事件冒泡与取消冒泡

关于什么是事件冒泡和如何取消事件冒泡的讨论！

##阻止事件冒泡和取消默认操作

取消事件冒泡

JS阻止冒泡和取消默认事件(默认行为)