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

【问题标题】：Why is a click on a nested element not bubbling up to it's parent with the click binding?为什么单击嵌套元素不会通过单击绑定冒泡到其父级？
【发布时间】：2014-03-10 16:42:56
【问题描述】：

我有这个 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，我的错误日志，而我期待点击冒泡到链接元素。

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

谢谢！

【问题讨论】：

标签： javascript jquery binding click event-propagation

【解决方案1】：

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

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

事件对象的target 属性是事件开始的元素（因此，h1 或p），而不是您挂钩的元素事件，与当前运行的事件处理程序相关联的事件。使用 jQuery（和 DOM2 的 addEventListener），您挂接事件的元素会以 this 的形式提供给您（以及事件对象上的 currentTarget）。

因此，如果您将 e.target 更改为 this，您将获得预期的行为。

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

【讨论】：

有趣。让我检查一下（do 是保留的......我用更短的东西替换了我的长变量名。请原谅）
@BakedInhalf：如果您希望事件停止冒泡（并且可能触发其他事件处理程序是祖先元素），请调用它。如果没有，不要。
@T.J.Crowder ，所以假设我只想点击/点击一个按钮，并确保它没有冒泡 - 我应该使用 e.stopPropagation() ？
冻糕。非常感谢！
@BakedInhalf：在您的按钮处理程序中，是的；否则，事件将传播到按钮的父级，然后传播到其父级，等等。