父母/孩子點擊事件處理（香草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!'); 
});