javascript 阻止事件冒泡 cancelBubble

最新推荐文章于 2022-03-09 19:22:19 发布

转载最新推荐文章于 2022-03-09 19:22:19 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zzd0916/p/7715073.html

文章标签：

#javascript #ViewUI

javascript简单的阻止事件冒泡，可以使用事件的cancelBubble方法为true；

html部分

<button id="btn1">点击显示div</button>
<div id="showDiv">
    显示了
</div>

js部分

window.onload = function(){
    var btn1 = document.getElementById("btn1");
    var showDiv = document.getElementById("showDiv");
    btn1.onclick = function(ev){
        var oEvent = ev || event;
        showDiv.style.display = "block";
        //阻止时间冒泡
        oEvent.cancelBubble = true;
    }
    document.onclick = function(){
        showDiv.style.display = "none";
    }
}