diff options
Diffstat (limited to 'files/fr/web/api/event/preventdefault/index.md')
| -rw-r--r-- | files/fr/web/api/event/preventdefault/index.md | 102 |
1 files changed, 57 insertions, 45 deletions
diff --git a/files/fr/web/api/event/preventdefault/index.md b/files/fr/web/api/event/preventdefault/index.md index db435939bb..7e8b7057f4 100644 --- a/files/fr/web/api/event/preventdefault/index.md +++ b/files/fr/web/api/event/preventdefault/index.md @@ -10,86 +10,98 @@ tags: translation_of: Web/API/Event/preventDefault browser-compat: api.Event.preventDefault --- -<div>{{apiref("DOM")}}</div> +{{apiref("DOM")}} -<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> +La méthode **`preventDefault()`**, rattachée à l'interface [`Event`](/fr/docs/Web/API/Event), 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>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> +L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque [`stopPropagation()`](/fr/docs/Web/API/Event/stopPropagation) ou [`stopImmediatePropagation()`](/fr/docs/Web/API/Event/stopImmediatePropagation) pour interrompre la propagation. -<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> +Comme indiqué ci-après, appeler **`preventDefault()`** n'aura aucun effet pour un évènement qui ne peut être annulé (comme ceux émis par [`EventTarget.dispatchEvent()`](/fr/docs/Web/API/EventTarget/dispatchEvent) sans avoir indiqué `cancelable: true`). -<h2 id="syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: js"><var>event</var>.preventDefault();</pre> +```js +event.preventDefault(); +``` -<h2 id="examples">Exemples</h2> +## Exemples -<h3 id="blocking_default_click_handling">Bloquer la gestion du clic par défaut</h3> +### Bloquer la gestion du clic par défaut -<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> +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 : -<h4 id="javascript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">document.querySelector("#id-checkbox").addEventListener("click", function(event) { +```js +document.querySelector("#id-checkbox").addEventListener("click", function(event) { console.log("Désolé ! preventDefault() ne vous laissera pas cocher ceci."); event.preventDefault(); -}, false);</pre> +}, false); +``` -<h4 id="html">HTML</h4> +#### HTML -<pre class="brush: html"><p>Essayez de cliquer sur la case à cocher.</p> +```html +<p>Essayez de cliquer sur la case à cocher.</p> -<form> - <label for="id-checkbox">Checkbox:</label> - <input type="checkbox" id="id-checkbox"/> -</form></pre> +<form> + <label for="id-checkbox">Checkbox:</label> + <input type="checkbox" id="id-checkbox"/> +</form> +``` -<h4 id="result">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("blocking_default_click_handling")}}</p> +{{EmbedLiveSample("blocking_default_click_handling")}} -<h3 id="stopping_keystrokes_from_reaching_an_edit_field">Empêcher les pressions du clavier sur un champ texte</h3> +### Empêcher les pressions du clavier sur un champ texte -<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> +Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à `preventDefault()`. -<h4 id="html_2">HTML</h4> +#### HTML -<p>Voici le formulaire contenant le champ texte :</p> +Voici le formulaire contenant le champ texte : -<pre class="brush: html"><form> - <label>Un champ texte - <input type="text" id="mon-champ-texte"> - </label> -</form></pre> +```html +<form> + <label>Un champ texte + <input type="text" id="mon-champ-texte"> + </label> +</form> +``` -<h4 id="JavaScript_2">JavaScript</h4> +#### JavaScript -<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> +Et voici le fragment de code JavaScript qui s'occupe de la logique principale. On commence par enregistrer un gestionnaire d'évènement pour [`keypress`](/fr/docs/Web/API/Element/keypress_event) : -<pre class="brush: js">let monChampTexte = document.getElementById('mon-champ-texte'); -monChampTexte.addEventListener('keypress', bloqueSaisie, false);</pre> +```js +let monChampTexte = document.getElementById('mon-champ-texte'); +monChampTexte.addEventListener('keypress', bloqueSaisie, false); +``` -<p>La fonction <code>bloqueSaisie()</code> empêche toute saisie au clavier :</p> +La fonction `bloqueSaisie()` empêche toute saisie au clavier : -<pre class="brush: js">function bloqueSaisie(evt) { +```js +function bloqueSaisie(evt) { evt.preventDefault(); console.log("Une saisie a été empêchée."); -};</pre> +}; +``` -<h4 id="result_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}}</p> +{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}} -<h2 id="notes">Notes</h2> +## Notes -<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> +Invoquer `preventDefault()` à 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>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> +On peut utiliser la propriété [`Event.cancelable`](/fr/docs/Web/API/Event/cancelable) afin de vérifier si un évènement est annulable. Invoquer `preventDefault()` sur un évènement non-annulable n'aura aucun effet. -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} |