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
|
---
title: event.preventDefault
slug: Web/API/Event/preventDefault
tags:
- API
- DOM
- Event
- preventDefault
translation_of: Web/API/Event/preventDefault
---
<p>{{APIRef("DOM")}}</p>
<p>{{domxref("Event")}} 接口的 <code><strong>preventDefault()</strong></code>方法，告诉{{Glossary("user agent")}}：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用{{domxref("Event.stopPropagation", "stopPropagation()")}} 或{{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}，才停止传播。</p>
<h3 id="Syntax" name="Syntax">语法</h3>
<pre class="eval"><em>event</em>.preventDefault();
</pre>
<h3 id="参数">参数</h3>
<p>无</p>
<h3 id="返回值">返回值</h3>
<p><code>undefined</code></p>
<h2 id="Example" name="Example">示例</h2>
<h3 id="Blocking_default_click_handling" name="Blocking_default_click_handling">阻止默认的点击事件执行</h3>
<p>选中复选框是点击复选框的默认行为。下面这个例子说明了怎样阻止默认行为的发生：</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="结果">结果</h4>
<p>你可以看到如下的行为:</p>
<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p>
<h3 id="Stopping_keystrokes_from_reaching_an_edit_field" name="Stopping_keystrokes_from_reaching_an_edit_field">在编辑域中阻止按键</h3>
<p>下面的这个例子说明了如何使用<code>preventDefault()</code>在文本编辑域中阻止有效的文本输入。如今，你通常可以使用<a href="/zh-CN/docs/Learn/HTML/Forms/Data_form_validation">原生的HTML表单验证</a>来代替。</p>
<h4 id="HTML_2">HTML</h4>
<p>表单:</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>当用户按下一个有效按键的时候，我们就给这个warning box 加上一些样式：</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>这里是相关的JavaScript代码。首先，监听{{event("keypress")}}事件：</p>
<pre class="brush: js"><code>var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener('keypress', checkName, false);</code></pre>
<p> <code>checkName()</code>方法可以监听按键并且决定是否允许按键的默认行为发生。</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><code>displayWarning()</code>方法显示了一个问题的通知。这不是一种优雅的方法，但是确实可以达到我们的目的。</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="结果_2">结果</h4>
<p>这里就是代码的执行结果:</p>
<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p>
<h2 id="备注"><font><font>备注</font></font></h2>
<p>在事件流的任何阶段调用<code>preventDefault()</code>都会取消事件，这意味着任何通常被该实现触发并作为结果的默认行为都不会发生。</p>
<p>你可以使用 {{domxref("Event.cancelable")}} 来检查该事件是否支持取消。为一个不支持cancelable的事件调用<code>preventDefault()</code>将没有效果。</p>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</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>初版</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<p>{{Compat("api.Event.preventDefault")}}</p>
|
