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

在任何父元素中捕获委派事件。如果您在冒泡阶段到达之前没有致电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/

注意：当您将事件委托给文档时，即使对于在设置处理程序之后添加的元素，这也将起作用。这样你就可以设置你的委托锚处理程序，然后可以在以后添加来自Ajax查询的锚，而不需要为每个创建的锚设置处理程序。

Answer 2

https://jsfiddle.net/82fpvwrL/



 $("a").click(function(){
        alert('WOO HOO! I was clicked.'); 
    });

$("a").click(function(){ alert('WOO HOO! I was clicked.'); });

Answer 3

将它应用于每个锚。

document.getElementsByTagName('a').map(tag => tag.onClick = yourHandler);

Answer 4

使用类似的东西：

$(document).on("click","a", (e) => {
   e.preventDefault();
   const element = e.target;
   // Do something
});

Answer 5

我就是这样做的（没有jQuery）：

document.body.addEventListener('click', function(ev) {
    var targetElement = ev.target;
    while(targetElement !== null && targetElement.nodeName.toUpperCase() !== "A") {
        targetElement = targetElement.parentElement;
    }

    // Proceed only if an A element was found in the ev.target's ancestry
    if (targetElement !== null) {
        ev.preventDefault();
        // Your code here
    }
}

这会捕获body标记处的事件，并且无法在文档中添加/删除a标记。只要click事件的传播没有被DOM树中从元素到body的任何元素停止，它就会起作用。

当点击任何“a”标签时，如何使点击处理程序处理，无论它是什么包裹？

5 个答案: