Event: preventDefault() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die preventDefault()-Methode der Event-Schnittstelle teilt dem User-Agent mit, dass, wenn das Ereignis nicht explizit behandelt wird, seine Standardaktion nicht wie üblich ausgeführt werden sollte.

Das Ereignis wird wie gewohnt weiterhin verbreitet, es sei denn, einer seiner Ereignis-Listener ruft stopPropagation() oder stopImmediatePropagation() auf, wodurch die Ausbreitung sofort beendet wird.

Wie unten erwähnt hat das Aufrufen von preventDefault() für ein nicht-abbrechbares Ereignis, wie eines, das über EventTarget.dispatchEvent() gesendet wurde, ohne dass cancelable: true angegeben wurde, keine Auswirkung.

Wenn ein passiver Listener preventDefault() aufruft, wird nichts passieren und es kann eine Warnung in der Konsole generiert werden.

Hinweis: Suchen Sie nach besseren Alternativen als die Verwendung von preventDefault(), um Standardaktionen zu blockieren. Sie können beispielsweise das disabled- oder readonly-Attribut an einem Formularelement verwenden, um dessen Interaktion zu verhindern, HTML-Beschränkungsvalidierung nutzen, um ungültige Eingaben abzulehnen, oder die overflow-Eigenschaft verwenden, um das Scrollen zu verhindern.

Syntax

js
preventDefault()

Parameter

Keine.

Rückgabewert

Kein Wert (undefined).

Beispiele

Blockierung der Standard-Klickverarbeitung

Das Umschalten eines Kontrollkästchens ist die Standardaktion beim Klicken auf ein Kontrollkästchen. Dieses Beispiel zeigt, wie man das verhindern kann:

JavaScript

js
const checkbox = document.querySelector("#id-checkbox");

checkbox.addEventListener("click", checkboxClick, false);

function checkboxClick(event) {
  const warn = "preventDefault() won't let you check this!\n";
  document.getElementById("output-box").innerText += warn;
  event.preventDefault();
}

HTML

html
<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>

Ergebnis

Hinweise

Das Aufrufen von preventDefault() in jeder Phase des Ereignisflusses hebt das Ereignis auf, was bedeutet, dass jede Standardaktion, die normalerweise als Ergebnis des Ereignisses von der Implementierung durchgeführt wird, nicht erfolgt.

Sie können Event.cancelable verwenden, um zu überprüfen, ob das Ereignis abbrechbar ist. Das Aufrufen von preventDefault() für ein nicht-abbrechbares Ereignis hat keine Wirkung.

Spezifikationen

Specification
DOM
# ref-for-dom-event-preventdefault③

Browser-Kompatibilität