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

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.

html

<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:

css

.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