Event: preventDefault()-Methode
Hinweis: Dieses Feature ist verfügbar in Web Workers.
Die preventDefault()
-Methode der Event
-Schnittstelle teilt dem Benutzeragenten mit, dass die Standardaktion des Ereignisses nicht wie gewöhnlich ausgeführt werden soll, wenn das Ereignis nicht explizit behandelt wird.
Das Ereignis wird weiterhin wie gewohnt verbreitet, es sei denn, einer seiner Ereignis-Listener ruft stopPropagation()
oder stopImmediatePropagation()
auf, von denen jede die Verbreitung sofort beendet.
Wie unten erwähnt, hat das Aufrufen von preventDefault()
für ein nicht abbrechbares Ereignis, wie eines, das über EventTarget.dispatchEvent()
ohne Angabe von cancelable: true
ausgelöst wurde, keine Wirkung.
Wenn ein passiver Listener preventDefault()
aufruft, wird nichts geschehen, und möglicherweise wird eine Konsolenwarnung generiert.
Syntax
event.preventDefault()
Beispiele
Blockieren der Standard-Click-Verarbeitung
Das Umschalten eines Kontrollkästchens ist die Standardaktion beim Klicken auf ein Kontrollkästchen. Dieses Beispiel demonstriert, wie dies verhindert werden 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
Verhindern, dass Tastatureingaben ein Eingabefeld erreichen
Das folgende Beispiel zeigt, wie ungültige Texteingaben daran gehindert werden können, das Eingabefeld mit preventDefault()
zu erreichen. Heutzutage sollten Sie normalerweise native HTML-Formularvalidierung verwenden.
HTML
Das HTML-Formular unten erfasst Benutzereingaben. Da wir nur an Tastatureingaben interessiert sind, deaktivieren wir autocomplete
, um zu verhindern, dass der Browser das Eingabefeld mit gespeicherten Werten fü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 etwas CSS für die Warnbox, die wir anzeigen, 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 Aufgabe erledigt. Zuerst wird auf keydown
-Ereignisse gehört:
const myTextbox = document.getElementById("my-textbox");
myTextbox.addEventListener("keydown", checkName, false);
Die checkName()
-Funktion, die sich die gedrückte Taste ansieht 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 displayWarning()
-Funktion zeigt eine Benachrichtigung über ein Problem an. Sie ist keine elegante Funktion, erledigt aber für die Zwecke dieses Beispiels ihren Job:
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
Hinweise
Das Aufrufen von preventDefault()
während jeder Phase des Ereignisablaufs hebt das Ereignis auf, was bedeutet, dass jede Standardaktion, die normalerweise durch die Implementierung als Ergebnis des Ereignisses ausgeführt wird, nicht stattfindet.
Sie können Event.cancelable
verwenden, um zu überprüfen, ob das Ereignis abgebrochen werden kann. Das Aufrufen von preventDefault()
für ein nicht abbrechbares Ereignis hat keine Wirkung.
Spezifikationen
Specification |
---|
DOM Standard # ref-for-dom-event-preventdefault③ |
Browser-Kompatibilität
BCD tables only load in the browser