diff options
Diffstat (limited to 'files/fr/web/api/event/preventdefault/index.html')
| -rw-r--r-- | files/fr/web/api/event/preventdefault/index.html | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/files/fr/web/api/event/preventdefault/index.html b/files/fr/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..0290a49d70 --- /dev/null +++ b/files/fr/web/api/event/preventdefault/index.html @@ -0,0 +1,180 @@ +--- +title: event.preventDefault +slug: Web/API/Event/preventDefault +tags: + - API + - DOM + - Evènement + - Gecko + - Méthodes +translation_of: Web/API/Event/preventDefault +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>La méthode <strong><code>preventDefault()</code></strong> de l 'interface {{domxref("Event")}} <span id="result_box" lang="fr"><span>indique à l'{{Glossary("user agent","agent utilisateur")}} que si l'événement n'est pas traité explicitement, son action par défaut ne doit pas être prise en compte comme elle le serait normalement.</span> <span>L'événement continue à se propager comme d'habitude, sauf si l'un de ses écouteurs appelle </span></span> {{domxref("Event.stopPropagation", "stopPropagation()")}} <span lang="fr"><span> ou </span></span> {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} <span lang="fr"><span>, dont l'un ou l'autre termine la propagation.</span></span></p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>Event</em>.preventDefault();</pre> + +<h3 id="Example" name="Example">Paramètres</h3> + +<p>None (<em>aucun</em>)</p> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p><code>undefined</code>.</p> + +<h2 id="Example" name="Example">Exemples</h2> + +<h3 id="Bloquer_la_gestion_des_clics_par_défaut"><span class="short_text" id="result_box" lang="fr"><span>Bloquer la gestion des clics par défaut</span></span></h3> + +<p>L'action par défaut du clic sur une case à cocher est le changement de son état. Cet exemple montre comment annuler cette action :</p> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#id-checkbox"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> + document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output-box"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"Sorry! <code>preventDefault()</code> won't let you check this!<br>"</span><span class="punctuation token">;</span> + event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Please click on the checkbox control.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>id-checkbox<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Checkbox:<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>id-checkbox<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output-box<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<h4 id="Résultat">Résultat</h4> + +<p>Vous pouvez voir <code>preventDefault</code> en action ici (anglais) :</p> + +<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p> + +<h3 id="Arrêter_les_frappes_de_touches_pour_atteindre_un_champ_d'édition"><span id="result_box" lang="fr"><span>Arrêter les frappes de touches pour atteindre un champ d'édition</span></span></h3> + +<p>L'exemple suivant montre comment bloquer la saisie de texte invalide dans un champ input avec <code>preventDefault()</code>. <span id="result_box" lang="fr"><span>Actuellement, vous devriez normalement utiliser la validation de forme HTML native à la place.</span></span></p> + +<h4 id="HTML_2"><span lang="fr"><span>HTML</span></span></h4> + +<p><span lang="fr"><span>Ici le formulaire :</span></span></p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>container<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Please enter your name using lowercase letters only.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>my-textbox<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<h4 id="CSS">CSS</h4> + +<p><span id="result_box" lang="fr"><span>Nous utilisons un peu de CSS pour la boîte d'avertissement qui sera dessinée lorsque l'utilisateur appuie sur une touche non valide :</span></span></p> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.warning</span> </span><span class="punctuation token">{</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span>px solid <span class="hexcode token">#f39389</span><span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">2</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">position</span><span class="punctuation token">:</span> absolute<span class="punctuation token">;</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#fbd8d4</span><span class="punctuation token">;</span> + <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#3b3c40</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p><span id="result_box" lang="fr"><span>Et voici le code JavaScript qui fait le travail.</span> <span>Tout d'abord, écoutez les événements {{event("keypress")}}:</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myTextbox <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'my-textbox'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +myTextbox<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'keypress'</span><span class="punctuation token">,</span> checkName<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>La fonction <code>checkName()</code>, <span id="result_box" lang="fr"><span>qui regarde la touche enfoncée et décide de l'autoriser :</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">checkName</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> charCode <span class="operator token">=</span> evt<span class="punctuation token">.</span>charCode<span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>charCode <span class="operator token">!=</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>charCode <span class="operator token"><</span> <span class="number token">97</span> <span class="operator token">||</span> charCode <span class="operator token">></span> <span class="number token">122</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + evt<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">displayWarning</span><span class="punctuation token">(</span> + <span class="string token">"Please use lowercase letters only."</span> + <span class="operator token">+</span> <span class="string token">"\n"</span> <span class="operator token">+</span> <span class="string token">"charCode: "</span> <span class="operator token">+</span> charCode <span class="operator token">+</span> <span class="string token">"\n"</span> + <span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<p>La fonction <code>displayWarning()</code> <span id="result_box" lang="fr"><span>présente une notification d'un problème.</span> <span>Ce n'est pas une fonction élégante mais elle fait le travail nécessaire à cet exemple :</span></span></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> warningTimeout<span class="punctuation token">;</span> +<span class="keyword token">var</span> warningBox<span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +warningBox<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">"warning"</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">displayWarning</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span> + warningBox<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> msg<span class="punctuation token">;</span> + + <span class="keyword token">if</span> <span class="punctuation token">(</span>warningBox<span class="punctuation token">)</span> <span class="punctuation token">{</span> + window<span class="punctuation token">.</span><span class="function token">clearTimeout</span><span class="punctuation token">(</span>warningTimeout<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + myTextbox<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>warningBox<span class="punctuation token">,</span> myTextbox<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + warningTimeout <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + warningBox<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>warningBox<span class="punctuation token">)</span><span class="punctuation token">;</span> + warningTimeout <span class="operator token">=</span> <span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">2000</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>Ici le résultat du code précédent :</p> + +<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p><code>Appeler preventDefault</code> pendant chaque étape de la propagation de l'évènement annule celui-ci, ce qui signifie que chaque action par défaut se produisant normalement ne se produira pas.</p> + +<div class="note"> +<p><strong>Note :</strong> Depuis {{Gecko("6.0")}}, appeler <code>preventDefault()</code> passe la valeur de la propriété {{domxref("event.defaultPrevented")}} à <code>true</code>.</p> +</div> + +<p>Vous pouvez utiliser {{domxref("Event.cancelable")}} pour vérifier que l'évènement peut être annulé. Appeler <code>preventDefault</code> sur un évènement qui ne peut pas être annulé n'a aucun effet.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<article class="approved text-content"> +<div class="boxed translate-rendered"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</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>Définition initiale.</td> + </tr> + </tbody> +</table> +</div> +</article> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.preventDefault")}}</p> |