1UnitedPower: Div bei Klick ausserhalb ausblenden

Beitrag lesen

SELF-Forum

Div bei Klick ausserhalb ausblenden

1UnitedPower
– Informationen zu den Bewertungsregeln

Meine Damen und Herren, habe ich Ihre Aufmerksamkeit?

Wenn ich bspw. auf den Body-Tag das onclick-Event setze, wie kann ich dann prüfen, ob der Klick tatsächlich innerhalb eines Div-Elements stattfand (um in allen anderen Fällen das Div auszublenden)?

Event-Handler bekommen beim Aufruf automatisch einen Parameter übergeben. Typischerweise ist das ein Objekt in dem diverse Informationen zu dem Ereignis abgelegt sind, bei einem Klick zum Beispiel, welches Element genau geklickt wurde.

document.querySelector('body').addEventListener('click', function ( event ) {  
  
   event.target; // Referenz auf das HTML-Element, das tatsächlich geklickt wurde  
   event.currentTarget; // Referenz auf das HTML-Element, bei dem der Event-Handler registriert wurde. Also hier <body>  
  
});

Ich kenne bisher nur den umgekehrten Weg, also z.B. das Parent-Element zu bestimmen.

Das ist auch der richtige Weg. Du kannst von event.target aus den DOM-Baum aufwärts traversieren und auf dem Weg nach oben die einzelnen Elemente testen, zum Beispiel gegen einen CSS-Selektor: element.matches('.modal-dialog');

Tipp am Rande: Für deinen Fall eignet sich vermutlich das <dialog>-Element besser als ein generisches <div>-Element.

--
“All right, then, I'll go to hell.” – Huck Finn
Beitrag melden
–
Informationen zu den Bewertungsregeln