javascript - Vanilla JS : Capture wrapping element click, 但不是它的 child

Question

我有一个包含另一个 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

Answer 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>