path: root/files/it/web/api/event/preventdefault/index.html

---
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
---
<div>{{ ApiRef("DOM") }}</div>

<p>Il metodo <code><strong>preventDefault()</strong></code> 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.</p>

<h2 id="Sintassi">Sintassi</h2>

<pre class="syntaxbox"><em>Event</em>.preventDefault();</pre>

<h3 id="Parametri">Parametri</h3>

<p>Nessuno.</p>

<h3 id="Valore_di_ritorno">Valore di ritorno</h3>

<p><code>undefined</code>.</p>

<h2 id="Esempi">Esempi</h2>

<h3 id="Blocco_della_gestione_dei_click_predefinita">Blocco della gestione dei click predefinita</h3>

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

<h4 id="JavaScript">JavaScript</h4>

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

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p&gt;Si prega di fare click sul controllo casella di controllo.&lt;/p&gt;

&lt;form&gt;
  &lt;label for="id-checkbox"&gt;Checkbox:&lt;/label&gt;
  &lt;input type="checkbox" id="id-checkbox"/&gt;
&lt;/form&gt;

&lt;div id="output-box"&gt;&lt;/div&gt;</pre>

<h4 id="Risultato">Risultato</h4>

<p>Puoi vedere questo in azione qui:</p>

<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p>

<h3 id="Interruzione_delle_sequenze_di_tasti_per_raggiungere_un_campo_di_modifica">Interruzione delle sequenze di tasti per raggiungere un campo di modifica</h3>

<p>L'esempio seguente dimostra come interrompere l'input di testo non valido per raggiungere il campo di input con <code>preventDefault()</code>. Al giorno d'oggi, di solito dovresti usare <a href="/it-US/docs/Learn/HTML/Forms/Form_validation">convalida del modulo HTML nativo</a>.</p>

<h4 id="HTML_2">HTML</h4>

<p>Ecco il modulo:</p>

<pre class="brush: html">&lt;div class="container"&gt;
  &lt;p&gt;Inserisci il tuo nome utilizzando solo lettere minuscole.&lt;/p&gt;

  &lt;form&gt;
    &lt;input type="text" id="my-textbox"&gt;
  &lt;/form&gt;
&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

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

<pre class="brush: css">.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}</pre>

<h4 id="JavaScript_2">JavaScript</h4>

<p>Ed ecco il codice JavaScript che fa il lavoro. Per prima cosa, ascolta gli eventi {{event("keypress")}}:</p>

<pre class="brush: js">var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener('keypress', checkName, false);
</pre>

<p>La funzione <code>checkName()</code>, che controlla il tasto premuto e decide se permetterlo:</p>

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

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

<pre class="brush: js">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);
}</pre>

<h4 id="Risultato_2">Risultato</h4>

<p>Ecco il risultato del codice precedente:</p>

<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p>

<h2 id="Note">Note</h2>

<p>Chiamando <code>preventDefault()</code> 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.</p>

<div class="note">
<p>A partire da {{Gecko("6.0")}}, chiamare <code>preventDefault()</code>  fa sì che il valore della proprietà {{ domxref("Event.defaultPrevented()") }} diventi <code>true</code>.</p>
</div>

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

<h2 id="Specifications" name="Specifications">Specifiche</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specifica</th>
   <th scope="col">Stato</th>
   <th scope="col">Commento</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
   <td>{{ Spec2('DOM WHATWG') }}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td>
   <td>{{ Spec2('DOM2 Events') }}</td>
   <td>Definizione iniziale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>



<p>{{Compat("api.Event.preventDefault")}}</p>