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
|
---
title: Event.preventDefault()
slug: Web/API/Event/preventDefault
tags:
- b
translation_of: Web/API/Event/preventDefault
---
<div>{{apiref("DOM")}}</div>
<p><span class="seoSummary">The {{domxref("Event")}} interface's <strong><code>preventDefault()</code></strong> method tells the {{Glossary("user agent")}} that if the event does not get explicitly handled, its default action should not be taken as it normally would be.</span> The event continues to propagate as usual, unless one of its event listeners calls {{domxref("Event.stopPropagation", "stopPropagation()")}} or {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}, either of which terminates propagation at once.</p>
<p>As noted below, calling <code><strong>preventDefault()</strong></code> for a non-cancelable event, such as one dispatched via {{domxref("EventTarget.dispatchEvent()")}}, without specifying <code>cancelable: true</code> has no effect.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><em>event</em>.preventDefault();
</pre>
<h2 id="Examples">Examples</h2>
<h3 id="Blocking_default_click_handling">Blocking default click handling</h3>
<p>Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:</p>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">document.querySelector("#id-checkbox").addEventListener("click", function(event) {
document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
event.preventDefault();
}, false);</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>Please click on the checkbox control.</p>
<form>
<label for="id-checkbox">Checkbox:</label>
<input type="checkbox" id="id-checkbox"/>
</form>
<div id="output-box"></div></pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p>
<h3 id="Stopping_keystrokes_from_reaching_an_edit_field">Stopping keystrokes from reaching an edit field</h3>
<p>The following example demonstrates how invalid text input can be stopped from reaching the input field with <code>preventDefault()</code>. Nowadays, you should usually use <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">native HTML form validation</a> instead.</p>
<h4 id="HTML_2">HTML</h4>
<p>Here's the form:</p>
<pre class="brush: html"><div class="container">
<p>Please enter your name using lowercase letters only.</p>
<form>
<input type="text" id="my-textbox">
</form>
</div></pre>
<h4 id="CSS">CSS</h4>
<p>We use a little bit of CSS for the warning box we'll draw when the user presses an invalid key:</p>
<pre class="brush: css">.warning {
border: 2px solid #f39389;
border-radius: 2px;
padding: 10px;
position: absolute;
background-color: #fbd8d4;
color: #3b3c40;
}</pre>
<h4 id="JavaScript_2">JavaScript</h4>
<p>And here's the JavaScript code that does the job. First, listen for {{domxref("Element/keypress_event", "keypress")}} events:</p>
<pre class="brush: js">var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener('keypress', checkName, false);
</pre>
<p>The <code>checkName()</code> function, which looks at the pressed key and decides whether to allow it:</p>
<pre class="brush: js">function checkName(evt) {
var charCode = evt.charCode;
if (charCode != 0) {
if (charCode < 97 || charCode > 122) {
evt.preventDefault();
displayWarning(
"Please use lowercase letters only."
+ "\n" + "charCode: " + charCode + "\n"
);
}
}
}
</pre>
<p>The <code>displayWarning()</code> function presents a notification of a problem. It's not an elegant function but does the job for the purposes of this example:</p>
<pre class="brush: js">var warningTimeout;
var warningBox = document.createElement("div");
warningBox.className = "warning";
function displayWarning(msg) {
warningBox.innerHTML = msg;
if (document.body.contains(warningBox)) {
window.clearTimeout(warningTimeout);
} else {
// insert warningBox after myTextbox
myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
}
warningTimeout = window.setTimeout(function() {
warningBox.parentNode.removeChild(warningBox);
warningTimeout = -1;
}, 2000);
}</pre>
<h4 id="Result_2">Result</h4>
<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p>
<h2 id="Notes">Notes</h2>
<p>Calling <code>preventDefault()</code> during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.</p>
<p>You can use {{domxref("Event.cancelable")}} to check if the event is cancelable. Calling <code>preventDefault()</code> for a non-cancelable event has no effect.</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.Event.preventDefault")}}</p>
|
