--- title: Event.preventDefault() slug: Web/API/Event/preventDefault tags: - DOM - Gecko - Reference_del_DOM_di_Gecko - Tutte_le_categorie translation_of: Web/API/Event/preventDefault ---
{{ ApiRef("DOM") }}

Il metodo preventDefault() dell'interfaccia {{domxref("Event")}} dice all'{{Glossary("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 {{domxref("Event.stopPropagation", "stopPropagation()")}} o {{domxref("Event.stopImmediatePropagation", "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:

{{EmbedLiveSample("Blocking_default_click_handling")}}

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 {{event("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:

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

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à {{ domxref("Event.defaultPrevented()") }} diventi true.

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

Specifiche

Specifica Stato Commento
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}} {{ Spec2('DOM WHATWG') }}  
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}} {{ Spec2('DOM2 Events') }} Definizione iniziale.

Compatibilità con i browser

{{Compat("api.Event.preventDefault")}}