javascript - 单击任何 "a"标记时，如何使单击处理程序处理，而不管它被包裹在什么周围？

Question

假设我的 HTML 页面中有这个:

<a href="/foo">bar</a>

<a href="/">
    <div></div> 
</a>

我想编写一个处理程序来处理任何“a”标签被点击时的情况(使用 jQuery):

$(document).click((e) => {
  const element = e.target;
  if (element && element.nodeName === 'A') {
    // Do something
    e.preventDefault();
  }
});

以上代码仅适用于顶部的“a”标签，但不适用于底部的标签。对于顶部的“a”标签，element.nodeName 等于 A。对于底部的“a”标签，element.nodeName 等于 DIV。

我如何编写一个点击处理程序来处理任何“a”标签被点击时的处理，而不管它被包裹在什么地方？

Answer 1

捕获任何父元素中的委托(delegate)事件。如果您在 冒泡 阶段到达之前不调用 preventDefault，文档将获取所有事件。阅读有关事件阶段的信息，它确实值得!

$(document).on("click", "a", function(event) {

    // You have clicked an anchor
    window.console.log ("You have clicked this anchor:", this," but you clicked maybe inside a div or a something inside the <a>", event.target);

});

https://jsfiddle.net/7ttm4y8k/4/

注意:当您将事件委托(delegate)给文档时，这甚至适用于在设置处理程序之后添加的元素。通过这种方式，您可以设置委托(delegate)的 anchor 处理程序，然后可能在以后添加来自 Ajax 查询的 anchor ，而无需为每个创建的 anchor 设置处理程序。