Wie funktioniert der Click-Handler, wenn auf ein beliebiges "a" -Tag geklickt wird, unabhängig davon, um was es sich handelt?

Question

Lassen Sie uns sagen, ich habe dies in meinem HTML-Seite:

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

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

Und ich möchte einen Handler schreiben, wenn Griffe ANY "ein" Tag (mit jQuery) geklickt wird:

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

der obigen Code funktioniert nur für den oberen "a" -Tag, aber nicht für den unteren. Für das obere "a" -Tag entspricht element.nodeNameA. Für das untere "a" -Tag entspricht element.nodeNameDIV.

Wie schreibe ich einen Click-Handler, der immer dann reagiert, wenn auf ein beliebiges "a" -Tag geklickt wird, unabhängig davon, um was es sich handelt?

Answer 1

Erfassen delegierte Ereignisse in einem übergeordneten Element. Das Dokument erhält alle Ereignisse, wenn Sie nicht preventDefault anrufen, bevor es während der sprudelnden Phase ankommt. Lesen Sie über Event-Phasen, es lohnt sich wirklich!

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

Hinweis: Wie Sie die Ereignisse auf das Dokument delegieren, wird dies auch für Elemente arbeiten, die hinzugefügt wurden, nachdem der Handler gesetzt worden ist. Auf diese Weise können Sie Ihren delegierten Anchor-Handler einrichten und dann zu einem späteren Zeitpunkt möglicherweise Anker aus einer Ajax-Abfrage hinzufügen, ohne dass für jeden erstellten Anker Handler festgelegt werden müssen.

Answer 2

An jedem Anker anbringen. Diese

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

Answer 3

ist, wie ich es tun (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 
    } 
} 

Dies wird die Veranstaltung im body Tag fangen und ist blind für a Tags im Dokument hinzugefügt/entfernt werden. Es funktioniert so lange, wie die Weiterleitung des Ereignisses click durch keine Elemente in der DOM-Struktur vom Element zum body gestoppt wurde.

Answer 4

https://jsfiddle.net/82fpvwrL/

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

Answer 5

Verwendung so etwas wie dieses:

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