首页 > 代码库 > 取消事件冒泡

取消事件冒泡

2024-09-01 16:04:02   214人阅读

下面我想实现的效果是点击按钮显示和隐藏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>

 

取消事件冒泡


联系
我们