Heute geht es darum, dass wir herausfinden, wie wir mit jQuery einen Klick außerhalb eines Elements registrieren. Das ist nützlich, wenn man bspw. sein eigenes Modal, aber auch Popup erstellen möchte.

Alle Klicks registrieren

// Unser Element
let element = "#unser-element";

$(document).on("click", function (e) {
  if (!$(element).is(e.target) && $(element).has(e.target).length === 0) {
    // Diese Stelle wird ausgeführt, wenn der Klick registriert wurde.
  }
});Code-Sprache: JavaScript (javascript)

Erst definieren wir unser Element #unser-element. Anschließend registrieren wir jeden einzelnen Klick auf unser Dokument. In der IF-Abfrage prüfen wir dann, ob unser gewünschtes Element geklickt wurde, oder enthalten ist. Jetzt führen wir unseren Code aus.

Klicks in einem Container registrieren

Anstelle von document kannst du auch ein anderes Element verwenden, falls du nur Klicks innerhalb eines Elements registrieren möchtest. Hierzu trägst du deinen Container anstelle des document ein:

// Unser Container
let container = ".container";

// Unser Element
let element = "#unser-element";

$(container).on("click", function (e) {
  if (!$(element).is(e.target) && $(element).has(e.target).length === 0) {
    // Diese Stelle wird ausgeführt, wenn der Klick registriert wurde.
  }
});Code-Sprache: JavaScript (javascript)

Jetzt weißt du, wie du Klicks außerhalb eines Elements registrieren kannst. So lässt sich auch ein Dropdown-Menü oder ähnliches erstellen, ohne dass du dafür jetzt große Frameworks benötigst.