<a href="#"> ein paar Sekunden nach dem draufklicken ausführen?

[Gunnar Bittersmann]

@@Felix Riesterer

Aber auch das benötigt man nicht, wenn man event delegation einsetzt: click-Eventhandler für body, darin prüfen, ob der Auslöser (event.target) von einem Link stammt.

diese Dogmen stören mich.

??

Natürlich dachte ich für mich an einen zentralen click-Handler. Aber was tue ich mit dem? Ich prüfe, ob event.target eines aus einer Liste ist, für die ich diesen Effekt haben möchte.

Warum das? Zu prüfen, ob das event.target bestimmten Bedingungen genügt, dürfte performanter sein als zu prüfen, ob es in einer Liste (collection) vorkommt.

if (event.target.nodeName === 'A')

vs.

if (document.links.includes(event.target))

Diese Liste erstelle ich mir mit einem querySelector, weil ich vielleicht nicht pauschal alle Elemente von document.links haben will.

Auch dafür brauchst du keine Liste zu erstellen:

if (event.target.nodeName === 'A' && event.target.classList.contains('foo'))

oder einfacher

if (event.target.matches('a.foo'))

vs.

if (document.querySelectorAll('a.foo').includes(event.target))

(document.querySelectorAll('a.foo') sollte dann natürlich außerhalb des Eventhandlers erledigt und in einer Variablen festgehalten werden. Der Punkt ist aber, dass man diese collection gar nicht braucht.)

Eben. Vielleicht will ich nur Links mit diesem Effekt ausstatten, die von meiner Domain hinweg führen, oder eben gerade anders herum, nur diejenigen Links, die weiterhin auf meine Domain verweisen.

if (event.target.matches('a[href*="example.net"]'))

bzw.

if (event.target.matches('a:not([href*="example.net"])'))

---

Das alles funktioniert nur, wenn im a-Element kein weiteres Markup vorkommt (wovon man nicht ausgehen sollte).

Wenn man in diesem Beispiel auf gelobte Land clickt, kommt B raus, nicht A.

Man mus sich also erstmal von event.target zum a-Element hochhangeln:

const anchor = event.target.closest('a');
if (anchor?.matches(':not([href*="example.net"])')) {…}

😷 LLAP