首页 > 技术文章 > js 事件冒泡

xjx199403 2019-04-25 18:55 原文

一个页面中的多个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) 。

如果需要阻止事件冒泡,可以为div添加“阻止事件冒泡”:

     document.getElementById("xx").addEventListener("click",
        function(event) {
                event.stopPropagation();
        },
        false);

 

推荐阅读