diff options
Diffstat (limited to 'files/fr/web/api/event/preventdefault/index.html')
| -rw-r--r-- | files/fr/web/api/event/preventdefault/index.html | 191 |
1 files changed, 53 insertions, 138 deletions
diff --git a/files/fr/web/api/event/preventdefault/index.html b/files/fr/web/api/event/preventdefault/index.html index 0290a49d70..db435939bb 100644 --- a/files/fr/web/api/event/preventdefault/index.html +++ b/files/fr/web/api/event/preventdefault/index.html @@ -1,180 +1,95 @@ --- -title: event.preventDefault +title: Event.preventDefault() slug: Web/API/Event/preventDefault tags: - API - DOM - - Evènement - - Gecko - - Méthodes + - Event + - Method + - Reference translation_of: Web/API/Event/preventDefault +browser-compat: api.Event.preventDefault --- -<div>{{ ApiRef("DOM") }}</div> +<div>{{apiref("DOM")}}</div> -<div> </div> +<p>La méthode <strong><code>preventDefault()</code></strong>, rattachée à l'interface <a href="/fr/docs/Web/API/Event"><code>Event</code></a>, indique à l'agent utilisateur que si l'évènement n'est pas explicitement géré, l'action par défaut ne devrait pas être exécutée comme elle l'est normalement.</p> -<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> +<p>L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque <a href="/fr/docs/Web/API/Event/stopPropagation"><code>stopPropagation()</code></a> ou <a href="/fr/docs/Web/API/Event/stopImmediatePropagation"><code>stopImmediatePropagation()</code></a> pour interrompre la propagation.</p> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<p>Comme indiqué ci-après, appeler <code><strong>preventDefault()</strong></code> n'aura aucun effet pour un évènement qui ne peut être annulé (comme ceux émis par <a href="/fr/docs/Web/API/EventTarget/dispatchEvent"><code>EventTarget.dispatchEvent()</code></a> sans avoir indiqué <code>cancelable: true</code>).</p> -<pre class="syntaxbox"><em>Event</em>.preventDefault();</pre> +<h2 id="syntax">Syntaxe</h2> -<h3 id="Example" name="Example">Paramètres</h3> +<pre class="brush: js"><var>event</var>.preventDefault();</pre> -<p>None (<em>aucun</em>)</p> +<h2 id="examples">Exemples</h2> -<h3 id="Valeur_retournée">Valeur retournée</h3> +<h3 id="blocking_default_click_handling">Bloquer la gestion du clic par défaut</h3> -<p><code>undefined</code>.</p> +<p>Lorsqu'on clique sur une case à cocher, par défaut, cela coche ou décoche la case. Dans cet exemple, on illustre comment bloquer ce comportement par défaut :</p> -<h2 id="Example" name="Example">Exemples</h2> +<h4 id="javascript">JavaScript</h4> -<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> +<pre class="brush: js">document.querySelector("#id-checkbox").addEventListener("click", function(event) { + console.log("Désolé ! preventDefault() ne vous laissera pas cocher ceci."); + event.preventDefault(); +}, false);</pre> -<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="html">HTML</h4> -<h4 id="JavaScript">JavaScript</h4> +<pre class="brush: html"><p>Essayez de cliquer sur la case à cocher.</p> -<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> +<form> + <label for="id-checkbox">Checkbox:</label> + <input type="checkbox" id="id-checkbox"/> +</form></pre> -<h4 id="HTML">HTML</h4> +<h4 id="result">Résultat</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> +<p>{{EmbedLiveSample("blocking_default_click_handling")}}</p> -<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> +<h3 id="stopping_keystrokes_from_reaching_an_edit_field">Empêcher les pressions du clavier sur un champ texte</h3> -<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> +<p>Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à <code>preventDefault()</code>.</p> -<h4 id="Résultat">Résultat</h4> +<h4 id="html_2">HTML</h4> -<p>Vous pouvez voir <code>preventDefault</code> en action ici (anglais) :</p> +<p>Voici le formulaire contenant le champ texte :</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> +<pre class="brush: html"><form> + <label>Un champ texte + <input type="text" id="mon-champ-texte"> + </label> +</form></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>Et voici le fragment de code JavaScript qui s'occupe de la logique principale. On commence par enregistrer un gestionnaire d'évènement pour <a href="/fr/docs/Web/API/Element/keypress_event"><code>keypress</code></a> :</p> -<p>Ici le résultat du code précédent :</p> +<pre class="brush: js">let monChampTexte = document.getElementById('mon-champ-texte'); +monChampTexte.addEventListener('keypress', bloqueSaisie, false);</pre> -<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p> +<p>La fonction <code>bloqueSaisie()</code> empêche toute saisie au clavier :</p> -<h2 id="Notes" name="Notes">Notes</h2> +<pre class="brush: js">function bloqueSaisie(evt) { + evt.preventDefault(); + console.log("Une saisie a été empêchée."); +};</pre> -<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> +<h4 id="result_2">Résultat</h4> -<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>{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}}</p> -<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="notes">Notes</h2> -<h2 id="Specification" name="Specification">Spécification</h2> +<p>Invoquer <code>preventDefault()</code> à n'importe quel moment du cycle de vie d'un évènement annulera cet évènement. Cela signifie que toute action par défaut, normalement exécutée par le navigateur, n'aura pas lieu.</p> -<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> +<p>On peut utiliser la propriété <a href="/fr/docs/Web/API/Event/cancelable"><code>Event.cancelable</code></a> afin de vérifier si un évènement est annulable. Invoquer <code>preventDefault()</code> sur un évènement non-annulable n'aura aucun effet.</p> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="specifications">Spécifications</h2> +<p>{{Specifications}}</p> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("api.Event.preventDefault")}}</p> +<p>{{Compat}}</p> |