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 das Ereignis explizit behandelt wird, sodass die Standardaktion, wie z.B. das Scrollen der Seite, die Navigation eines Links oder das Einfügen von Text, nicht ausgeführt werden soll.

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

Wie unten angegeben, hat das Aufrufen von preventDefault() für ein nicht abbrechbares Ereignis, wie eines, das über EventTarget.dispatchEvent() ausgelöst wird, ohne Angabe von cancelable: true keine Wirkung.

Wenn ein passiver Listener preventDefault() aufruft, wird nichts passieren und möglicherweise wird eine Konsolenwarnung generiert.

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

Syntax

js
preventDefault()

Parameter

Keine.

Rückgabewert

Keine (undefined).

Beispiele

Blockieren der Standard-Klickbehandlung

Das Umschalten eines Kontrollkästchens ist die Standardaktion beim Klicken auf ein Kontrollkästchen. Dieses Beispiel demonstriert, wie dies verhindert werden 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() während jeder Phase des Ereignisflusses bricht das Ereignis ab, was bedeutet, dass jede Standardaktion, die normalerweise von der Implementierung als Ergebnis des Ereignisses ausgefü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