javascript - 为什么单击嵌套元素不会通过单击绑定冒泡到其父级？

Question

我有这个 HTML：

<a href="#" class="action" data-action="foo">
  <h1>Some</h1>
  <p>Text<p>
</a>

和这个绑定：

$(document).on("click", ".action", function (e) {
  var do = e.target.getAttribute("data-action");
  if (do === undefined || do === null) {
    console.log("error");
  }
});

奇怪的是，如果我点击h1或p，我的错误日志，而我期待点击冒泡到链接元素。

问题：
如果单击嵌套在具有单击处理程序的元素中的元素，正常行为是什么？为什么我的点击没有冒泡？

谢谢！

Answer 1

奇怪的是，如果我点击 h1 或 p，我的错误日志，而我期待点击冒泡到链接元素。

确实如此（这就是 jQuery 调用您的事件处理程序的原因），您只是没有查看该元素。

事件对象的target属性是事件开始的元素（所以， theh1或 the p），而不是您挂钩事件的元素，当前运行的事件处理程序与之关联的元素。使用 jQuery（和 DOM2's addEventListener），您挂钩事件的元素将作为this（以及currentTarget在事件对象上）提供给您。

所以如果你改变你的e.targetto this，你会得到你期望的行为。

---

旁注：do是 JavaScript 中的保留字，不能用作变量名。我很惊讶代码不会因错误而失败。