父母/孩子点击事件处理（香草JS）

Question

我一直在四处寻找答案在香草JS和似乎无法找到任何东西没有参考jquery的stopPropagation。

我有一个“div1”，其中我应用了一个eventlistener，在新窗口中打开一个URL。我也有一个“div2”与“div1”，我希望能够通过eventListener进行交互。

但是，正如您可以想象的那样，现在，单击div2只会激活div1的eventListener。有没有一种方法来优先点击或适应div2坐在div1的事实？

Image Representation of Div Structure

Answer 1

使用stopPropagation是确保事件不通过掉落到下一个元素层次结构中的一种方式：

div1.addEventListener('click', function(e) { 
    alert('Div1 Clicked Directly!'); 
}); 

div2.addEventListener('click', function(e) { 
    e.stopPropagation(); 
    alert('Div2 Clicked!'); 
});