javascript - 父/子单击事件处理( Vanilla JS)

Question

我一直在寻找 vanilla JS 的答案，如果不引用 jquery 的 stopPropagation，我似乎找不到任何东西。

我有一个“div1”，我已经应用了一个事件监听器，在新窗口中打开一个 URL。我还有一个带有“div1”的“div2”，我也希望能够通过 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!');
});