为什么单击嵌套元素并没有通过单击绑定冒泡到它的父级？

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事件对象的属性是事件开始的元素(因此,h1或者p),而不是您挂钩事件的元素,即当前运行的事件处理程序所关联的元素.使用jQuery(和DOM2 addEventListener),您将事件挂钩的元素this(以及currentTarget事件对象)提供给您.

所以,如果你改变你e.target对this,你会得到你所期望的行为.

附注:do是JavaScript中的保留字,不能将其用作变量名.我很惊讶代码不会因为错误而失败.