Il metodo preventDefault() dell'interfaccia Event dice all'user agent che se l'evento non viene esplicitamente gestito, la sua azione predefinita non dovrebbe essere presa come normalmente. L'evento continua a propagarsi come al solito, a meno che uno dei suoi listener di eventi non chiami stopPropagation()stopImmediatePropagation(), uno dei due interrompa la propagazione contemporaneamente.

Sintassi

Event.preventDefault();

Parametri

Nessuno.

Valore di ritorno

undefined.

Esempi

Blocco della gestione dei click predefinita

La commutazione di una casella di controllo è l'azione predefinita di fare click su una casella di controllo. Questo esempio mostra come impedire che ciò accada:

JavaScript

document.querySelector("#id-checkbox").addEventListener("click", function(event) {
         document.getElementById("output-box").innerHTML += "Mi dispiace! <code>preventDefault()</code> non ti lascerà controllare questo!<br>";
         event.preventDefault();
}, false);

HTML

<p>Si prega di fare click sul controllo casella di controllo.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox"/>
</form>

<div id="output-box"></div>

Risultato

Puoi vedere questo in azione qui:

Interruzione delle sequenze di tasti per raggiungere un campo di modifica

L'esempio seguente dimostra come interrompere l'input di testo non valido per raggiungere il campo di input con preventDefault(). Al giorno d'oggi, di solito dovresti usare convalida del modulo HTML nativo.

HTML

Ecco il modulo:

<div class="container">
  <p>Inserisci il tuo nome utilizzando solo lettere minuscole.</p>

  <form>
    <input type="text" id="my-textbox">
  </form>
</div>

CSS

Usiamo un po' di CSS per la finestra di avviso che disegneremo quando l'utente preme una chiave non valida:

.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}

JavaScript

Ed ecco il codice JavaScript che fa il lavoro. Per prima cosa, ascolta gli eventi keypress:

var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener('keypress', checkName, false);

La funzione checkName(), che controlla il tasto premuto e decide se permetterlo:

function checkName(evt) {
  var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      displayWarning(
        "Per favore usa solo lettere minuscole."
        + "\n" + "charCode: " + charCode + "\n"
      );
    }
  }
}

la funzione displayWarning() presenta la notifica di un problema. Non è una funzione elegante ma fa il lavoro ai fini di questo esempio:

var warningTimeout;
var warningBox = document.createElement("div");
warningBox.className = "warning";

function displayWarning(msg) {
  warningBox.innerHTML = msg;

  if (document.body.contains(warningBox)) {
    window.clearTimeout(warningTimeout);
  } else {
    // inserisci warningBox dopo myTextbox
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
  }

  warningTimeout = window.setTimeout(function() {
      warningBox.parentNode.removeChild(warningBox);
      warningTimeout = -1;
    }, 2000);
}

Risultato

Ecco il risultato del codice precedente:

Note

Chiamando preventDefault() durante qualsiasi fase del flusso di eventi annulla l'evento, il che significa che non verrà eseguita alcuna azione predefinita normalmente eseguita dall'implementazione come risultato dell'evento.

A partire da Gecko 6.0, chiamare preventDefault()  fa sì che il valore della proprietà Event.defaultPrevented() diventi true.

Puoi utilizzare Event.cancelable per verificare se l'evento è cancellabile. Chiamare preventDefault() per un evento non cancellabile non ha alcun effetto.

Specifiche

Specifica Stato Commento
DOM
The definition of 'Event.preventDefault()' in that specification.
Living Standard  
Document Object Model (DOM) Level 2 Events Specification
The definition of 'Event.preventDefault()' in that specification.
Obsolete Definizione iniziale.

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
preventDefaultChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: mdnwebdocs-bot, IsibisiDev, nicecatch, teoli, jsx, Federico
Ultima modifica di: mdnwebdocs-bot,