files/fr/web/api/event/preventdefault/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
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! &lt;code&gt;preventDefault()&lt;/code&gt; won't let you check this!&lt;br&gt;"</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">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Please click on the checkbox control.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">&gt;</span></span>Checkbox:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">/&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</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">&lt;</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">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Please enter your name using lowercase letters only.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>

  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</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">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</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">&lt;</span> <span class="number token">97</span> <span class="operator token">||</span> charCode <span class="operator token">&gt;</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>