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中的保留字，您不能将其用作变量名。我很惊讶代码不会因为错误而失败。

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

1 个答案: