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
|
---
title: Event.preventDefault()
slug: Web/API/Event/preventDefault
translation_of: Web/API/Event/preventDefault
---
<div>{{ ApiRef("DOM") }}</div>
<div> </div>
<h2 id="Summary" name="Summary">概要</h2>
<p>如果事件可以被取消，就取消事件（即取消事件的預設行為）。但不會影響事件的傳遞，事件仍會繼續傳遞。</p>
<h2 id="Syntax" name="Syntax">語法</h2>
<pre class="syntaxbox"><em>event</em>.preventDefault();</pre>
<h2 id="Example" name="Example">範例</h2>
<p>Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>
</head>
<body>
<p>Please click on the checkbox control.</p>
<form>
<label for="id-checkbox">Checkbox</label>
<input type="checkbox" id="id-checkbox"/>
</form>
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(event){
alert("preventDefault will stop you from checking this checkbox!")
event.preventDefault();
}, false);
</script>
</body>
</html></pre>
<p>You can see <code>preventDefault</code> in action <a class="internal" href="/samples/domref/dispatchEvent.html" title="samples/domref/dispatchEvent.html">here</a>.</p>
<p>The following example demonstrates how invalid text input can be stopped from reaching the input field with preventDefault().</p>
<div id="preventDefault_invalid_text">
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>
<script>
</pre>
<pre class="brush: js">function Init () {
var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener( 'keypress', checkName, false );
}
function checkName(evt) {
var charCode = evt.charCode;
if (charCode != 0) {
if (charCode < 97 || charCode > 122) {
evt.preventDefault();
alert(
"Please use lowercase letters only."
+ "\n" + "charCode: " + charCode + "\n"
);
}
}
}
</pre>
<pre class="brush: html"></script>
</head>
<body onload="Init ()">
<p>Please enter your name using lowercase letters only.</p>
<form>
<input type="text" id="my-textbox" />
</form>
</body>
</html></pre>
</div>
<p>Here is the result of the preceding code:</p>
<p>{{ EmbedLiveSample('preventDefault_invalid_text', '', '', '') }}</p>
<h2 id="Notes" name="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>
<div class="note">
<p><strong>Note:</strong> As of {{Gecko("6.0")}}, calling <code>preventDefault()</code> causes the {{ domxref("event.defaultPrevented") }} property's value to become <code>true</code>.</p>
</div>
<p>你可以查看 {{domxref("Event.cancelable")}} 屬性來檢查事件是否能夠被取消。對一個不能被取消的事件呼叫 <code>preventDefault()</code> 方法是沒有任何效果的。</p>
<p><code>preventDefault()</code> 方法不會停止事件傳遞。若要停止事件繼續傳遞，可以使用 {{domxref("Event.stopPropagation()")}} 方法。</p>
<h2 id="Specifications" name="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('DOM4', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
<td>{{ Spec2('DOM4') }}</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>
|
