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 die Standardaktion nicht ausgeführt werden soll, wenn das Ereignis nicht ausdrücklich behandelt wird, wie es normalerweise der Fall wäre.

Das Ereignis wird weiterhin wie gewohnt propagiert, es sei denn, einer der Event-Listener ruft stopPropagation() oder stopImmediatePropagation() auf, welche beide die Propagation sofort beenden.

Wie unten angemerkt, hat das Aufrufen von preventDefault() für ein nicht abbrechbares Ereignis, wie eines, das über EventTarget.dispatchEvent() gesendet wird, ohne cancelable: true anzugeben, keine Wirkung.

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

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

Syntax

js
preventDefault()

Beispiele

Standard-Click-Verarbeitung blockieren

Das Umschalten eines Kontrollkästchens ist die Standardaktion eines Klicks auf ein Kontrollkästchen. Dieses Beispiel demonstriert, wie man das verhindert:

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

Anmerkungen

Das Aufrufen von preventDefault() während irgendeines Stadiums des Ereignisflusses hebt das Ereignis auf, was bedeutet, dass jede Standardaktion, die normalerweise als Ergebnis des Ereignisses von der Implementierung ausgeführt werden würde, nicht stattfindet.

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