From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- files/fr/web/api/event/preventdefault/index.md | 102 ++++++++++++++----------- 1 file changed, 57 insertions(+), 45 deletions(-) (limited to 'files/fr/web/api/event/preventdefault') 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 --- -
{{apiref("DOM")}}
+{{apiref("DOM")}} -

La méthode preventDefault(), rattachée à l'interface 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.

+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. -

L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque stopPropagation() ou stopImmediatePropagation() pour interrompre la propagation.

+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. -

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() sans avoir indiqué cancelable: true).

+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`). -

Syntaxe

+## Syntaxe -
event.preventDefault();
+```js +event.preventDefault(); +``` -

Exemples

+## Exemples -

Bloquer la gestion du clic par défaut

+### Bloquer la gestion du clic par défaut -

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 :

+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 : -

JavaScript

+#### JavaScript -
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);
+}, false); +``` -

HTML

+#### HTML -
<p>Essayez de cliquer sur la case à cocher.</p>
+```html
+
Essayez de cliquer sur la case à cocher.

 
-<form>
-  <label for="id-checkbox">Checkbox:</label>
-  <input type="checkbox" id="id-checkbox"/>
-</form>
+
+ + +
+``` -

Résultat

+#### Résultat -

{{EmbedLiveSample("blocking_default_click_handling")}}

+{{EmbedLiveSample("blocking_default_click_handling")}} -

Empêcher les pressions du clavier sur un champ texte

+### Empêcher les pressions du clavier sur un champ texte -

Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à preventDefault().

+Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à `preventDefault()`. -

HTML

+#### HTML -

Voici le formulaire contenant le champ texte :

+Voici le formulaire contenant le champ texte : -
<form>
-  <label>Un champ texte
-    <input type="text" id="mon-champ-texte">
-  </label>
-</form>
+```html +
+ +
+``` -

JavaScript

+#### JavaScript -

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 :

+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) : -
let monChampTexte = document.getElementById('mon-champ-texte');
-monChampTexte.addEventListener('keypress', bloqueSaisie, false);
+```js +let monChampTexte = document.getElementById('mon-champ-texte'); +monChampTexte.addEventListener('keypress', bloqueSaisie, false); +``` -

La fonction bloqueSaisie() empêche toute saisie au clavier :

+La fonction `bloqueSaisie()` empêche toute saisie au clavier : -
function bloqueSaisie(evt) {
+```js
+function bloqueSaisie(evt) {
   evt.preventDefault();
   console.log("Une saisie a été empêchée.");
-};
+}; +``` -

Résultat

+#### Résultat -

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

+{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}} -

Notes

+## Notes -

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.

+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. -

On peut utiliser la propriété Event.cancelable afin de vérifier si un évènement est annulable. Invoquer preventDefault() sur un évènement non-annulable n'aura aucun effet.

+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. -

Spécifications

+## Spécifications -

{{Specifications}}

+{{Specifications}} -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat}}

+{{Compat}} -- cgit v1.2.3-54-g00ecf