js 事件冒泡

一个页面中的多个dom若是呈现父子类关系,而且都绑定了事件,则会有事件冒泡的状况发生,例如:

<div onclick="alert('3');">
    <div onclick="alert('2');">
         <a id ="xx" href="#" onclick="alert('1');"> 测试冒泡 </a>
    </div>
</div>

上面这段代码一共有三个事件:alert(3),alert(2),alert(1),都分别绑定了单击事件。当咱们点击“测试冒泡”这个a标签时,会连续弹出3个提示框。这就是事件冒泡引发的现象。事件冒泡的过程是:alert(1) --> alert(2) --> alert(3) 。dom

若是须要阻止事件冒泡,能够为div添加“阻止事件冒泡”:测试

     document.getElementById("xx").addEventListener("click",
        function(event) {
                event.stopPropagation();
        },
        false);
相关文章
相关标签/搜索