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 weist den User Agent an, dass wenn das Ereignis nicht explizit behandelt wird, seine Standardaktion nicht wie üblich durchgeführt werden soll.
Das Ereignis propagiert weiter wie gewohnt, es sei denn, einer seiner Ereignislistener ruft stopPropagation()
oder stopImmediatePropagation()
auf, von denen jede die Propagation sofort beendet.
Wie unten angegeben, hat das Aufrufen von preventDefault()
für ein nicht abbrechbares Ereignis, wie eines, das über EventTarget.dispatchEvent()
ausgelöst wird, ohne cancelable: true
anzugeben, keine Wirkung.
Wenn ein passiver Listener preventDefault()
aufruft, passiert nichts und es kann eine Konsolenwarnung generiert werden.
Syntax
preventDefault()
Beispiele
Blockierung der Standardeingabe bei Klick
Das Umschalten eines Kontrollkästchens ist die Standardaktion beim Klick auf ein Kontrollkästchen. Dieses Beispiel zeigt, wie man dies verhindern kann:
JavaScript
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
<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
Stoppen von Tastenanschlägen, bevor sie ein Eingabefeld erreichen
Das folgende Beispiel zeigt, wie ungültige Texteingaben mithilfe von preventDefault()
daran gehindert werden können, das Eingabefeld zu erreichen. Heutzutage sollten Sie in der Regel native HTML-Formularvalidierung verwenden.
HTML
Das untenstehende HTML-Formular erfasst Benutzereingaben. Da wir uns nur für Tastenanschläge interessieren, deaktivieren wir autocomplete
, um zu verhindern, dass der Browser das Eingabefeld mit zwischengespeicherten Werten ausfüllt.
<div class="container">
<p>Please enter your name using lowercase letters only.</p>
<form>
<input type="text" id="my-textbox" autocomplete="off" />
</form>
</div>
CSS
Wir verwenden ein wenig CSS für das Warnfeld, das wir anzeigen werden, wenn der Benutzer eine ungültige Taste drückt:
.warning {
border: 2px solid #f39389;
border-radius: 2px;
padding: 10px;
position: absolute;
background-color: #fbd8d4;
color: #3b3c40;
}
JavaScript
Und hier ist der JavaScript-Code, der die Arbeit macht. Zuerst hören wir auf keydown
Ereignisse:
const myTextbox = document.getElementById("my-textbox");
myTextbox.addEventListener("keydown", checkName, false);
Die Funktion checkName()
, die die gedrückte Taste prüft und entscheidet, ob sie erlaubt wird:
function checkName(evt) {
const key = evt.key;
const lowerCaseAlphabet = "abcdefghijklmnopqrstuvwxyz";
if (!lowerCaseAlphabet.includes(key)) {
evt.preventDefault();
displayWarning(`Please use lowercase letters only.\nKey pressed: ${key}\n`);
}
}
Die Funktion displayWarning()
zeigt eine Benachrichtigung über ein Problem an. Sie ist keine elegante Funktion, erfüllt aber für die Zwecke dieses Beispiels ihren Zweck:
let warningTimeout;
const warningBox = document.createElement("div");
warningBox.className = "warning";
function displayWarning(msg) {
warningBox.innerText = msg;
if (document.body.contains(warningBox)) {
clearTimeout(warningTimeout);
} else {
// insert warningBox after myTextbox
myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
}
warningTimeout = setTimeout(() => {
warningBox.parentNode.removeChild(warningBox);
warningTimeout = -1;
}, 2000);
}
Ergebnis
Anmerkungen
Das Aufrufen von preventDefault()
während jeder Phase des Ereignisflusses bricht das Ereignis ab, was bedeutet, dass jede Standardaktion, die normalerweise durch die Implementierung als Ergebnis des Ereignisses durchgeführt würde, 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
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
preventDefault |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support