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 Juli 2015.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die preventDefault()-Methode des Event-Interfaces teilt dem User-Agent mit, dass das Ereignis explizit behandelt wird, sodass die Standardaktion, wie z.B. das Scrollen der Seite, die Navigation von 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, von denen beide die Propagation sofort beenden.
Wie unten erwähnt, hat das Aufrufen von preventDefault() bei einem nicht abbrechbaren Ereignis, wie einem, das über EventTarget.dispatchEvent() ausgelöst wurde, ohne cancelable: true anzugeben, keine Wirkung.
Wenn ein passiver Listener preventDefault() aufruft, passiert nichts und es kann eine Konsolenwarnung generiert werden.
Hinweis:
Suchen Sie nach besseren Alternativen, als preventDefault() zu verwenden, um Standardaktionen zu blockieren. Sie können z.B. das disabled- oder readonly-Attribut bei einem Formularelement 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
preventDefault()
Parameter
Keine.
Rückgabewert
Keine (undefined).
Beispiele
Blockieren der Standard-Click-Handhabung
Das Umschalten eines Kontrollkästchens ist die Standardaktion des Klickens auf ein Kontrollkästchen. Dieses Beispiel zeigt, wie verhindert werden kann, dass das passiert:
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();
}
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>
Resultat
Hinweise
Das Aufrufen von preventDefault() während einer beliebigen Phase des Ereignisflusses hebt das Ereignis auf, was bedeutet, dass keine Standardaktion, die normalerweise von der Implementierung als Ergebnis des Ereignisses ausgeführt wird, stattfinden wird.
Sie können Event.cancelable verwenden, um zu prüfen, ob das Ereignis abbrechbar ist. Das Aufrufen von preventDefault() bei einem nicht abbrechbaren Ereignis hat keine Wirkung.
Spezifikationen
| Specification |
|---|
| DOM # ref-for-dom-event-preventdefault③ |
Browser-Kompatibilität
Loading…