Event: Methode preventDefault()
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die Methode preventDefault() der Schnittstelle Event teilt dem User Agent mit, dass das Ereignis ausdrücklich behandelt wird. Daher soll die Standardaktion des Ereignisses – etwa das Scrollen der Seite, das Folgen eines Links oder das Einfügen von Text – nicht ausgeführt werden.
Das Ereignis wird weiterhin wie gewohnt weitergegeben, sofern nicht einer seiner Event Listener stopPropagation() oder stopImmediatePropagation() aufruft. Beide Methoden beenden die Weitergabe sofort.
Wie unten erläutert, hat der Aufruf von preventDefault() bei einem Ereignis, das nicht abgebrochen werden kann, keine Wirkung. Das gilt beispielsweise für ein Ereignis, das über EventTarget.dispatchEvent() ausgelöst wurde, ohne cancelable: true anzugeben.
Wenn ein passiver Listener preventDefault() aufruft, geschieht nichts. Möglicherweise wird eine Warnung in der Konsole ausgegeben.
Hinweis:
Suchen Sie nach besseren Alternativen zu preventDefault(), um Standardaktionen zu unterbinden. Beispielsweise können Sie bei einem Formularsteuerelement das Attribut disabled oder readonly verwenden, um eine Interaktion damit zu verhindern, mit der HTML-Constraint-Validierung ungültige Eingaben zurückweisen oder mit der Eigenschaft overflow das Scrollen verhindern.
Syntax
preventDefault()
Parameter
Keine.
Rückgabewert
Keiner (undefined).
Beispiele
Standardverhalten beim Klicken verhindern
Beim Klicken auf eine Checkbox wird ihr Zustand standardmäßig umgeschaltet. Dieses Beispiel zeigt, wie Sie das verhindern:
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>
JavaScript
const checkbox = document.querySelector("#id-checkbox");
checkbox.addEventListener("click", checkboxClick);
function checkboxClick(event) {
const warn = "preventDefault() won't let you check this!\n";
document.getElementById("output-box").innerText += warn;
event.preventDefault();
}
Ergebnis
Hinweise
Ein Aufruf von preventDefault() in einer beliebigen Phase des Ereignisablaufs bricht das Ereignis ab. Dadurch wird eine Standardaktion, die die Implementierung normalerweise als Reaktion auf das Ereignis ausführen würde, nicht ausgeführt.
Mit Event.cancelable können Sie prüfen, ob das Ereignis abgebrochen werden kann. Bei einem Ereignis, das nicht abgebrochen werden kann, hat der Aufruf von preventDefault() keine Wirkung.
Spezifikationen
| Spezifikation |
|---|
| DOM # ref-for-dom-event-preventdefault③ |