Vanilla JS：捕获包装元素点击，但从不捕获它的子元素答案

【问题标题】：Vanilla JS: Capture wrapping element click, but never its childrenVanilla JS：捕获包装元素点击，但从不捕获它的子元素
【发布时间】：2019-09-28 00:23:08
【问题描述】：

我有一个包含另一个 div (B) 的 div (A)。

当我点击 A 时，我希望 e.target 成为 A。当我点击 B 时，我也希望 e.target 成为 A。

既然你必须点击包装元素才能得到内部元素，你怎么告诉JS永远不要得到B？

我知道这与冒泡有关，但我已尽我所能，但似乎没有任何帮助。

// none of these work
e.preventDefault()
e.stopPropagation()
e.stopImmediatePropagation()
e.cancelBubble = true

// adding { capture: false } doesn't help either

这是一个 JSBin 简化的问题测试用例。 https://jsbin.com/wezoyoyito/1/edit?html,css,js,console,output

【问题讨论】：

标签： javascript event-bubbling

【解决方案1】：

改用event.currentTarget，它总是引用监听器所附加的元素（而不是内部点击的元素）：

document.querySelectorAll('.a').forEach(el => {
  el.addEventListener('click', e => {
    console.log(e.currentTarget.className)
  })
})

.a {
  background: red;
  width: 100px;
  height: 100px;
}

.b {
  background: yellow;
  width: 80px;
  height: 80px;
}

<div class="a">
  A
  <div class="b">B</div>
</div>

【讨论】：

【解决方案2】：

我尝试测试了以下代码，应该可以根据您的需要工作。

document.querySelectorAll('.a').forEach(el => {

  el.addEventListener('click', e => {
     e.preventDefault();
     let target = e.target;
     while (target !== el) {
       target = target.parentNode;
    }
    console.log(Array.from(target.classList)[0])
  });

});

【讨论】：