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

Question

Let's say I have this in my HTML page:

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

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

And I want to write a handler that handles when ANY "a" tag is clicked (with jQuery):

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

The above code only works for the top "a" tag, but not the bottom one. For the top "a" tag, element.nodeName equals A . For the bottom "a" tag, element.nodeName equals DIV .

How do I write a click handler that handles whenever ANY "a" tag is clicked, regardless of what it is wrapped around?

Answer 1

Capture delegated events in any parent element. Document will get all events if you don't call preventDefault before it arrives during the bubbling phase. Read about Event phases, it really pays off!

$(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/

Note: As you are delegating the events to the document, this will work even for elements that were added after the handler's been set. This way you can setup your delegated anchor handler then maybe at a later time add anchors from an Ajax query without the need of setting handlers to every created anchor.

Answer 2

https://jsfiddle.net/82fpvwrL/

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

Answer 3

将它应用于每个锚点。

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

Answer 4

Use something like this:

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

Answer 5

This is how I do it (w/o 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
    }
}

This will catch the event at the body tag and is oblivious to a tags being added/removed in the document. It will work as long as the click event's propagation was not stopped by any elements in the DOM tree from the element to the body .