<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);