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
|
---
title: Event.preventDefault()
slug: Web/API/Event/preventDefault
tags:
- API
- DOM
- Event
- Method
- Reference
- イベント
- メソッド
translation_of: Web/API/Event/preventDefault
---
<div>{{apiref("DOM")}}</div>
<p><span class="seoSummary">{{domxref("Event")}} インターフェースの <strong><code>preventDefault()</code></strong> メソッドは、{{Glossary("user agent", "ユーザーエージェント")}}に、イベントが明示的に処理されない場合にその既定のアクションを通常どおりに行うべきではないことを伝えます。</span>このイベントは通常、イベントリスナーの1つが {{domxref("Event.stopPropagation", "stopPropagation()")}} または {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} を呼び出し、いずれかが一度に伝播を終了しない限り、伝播し続けます。</p>
<p>以下にある通り、<code><strong>preventDefault()</strong></code> をキャンセル不可のイベントのために呼び出すと、例えば {{domxref("EventTarget.dispatchEvent()")}} を<code>cancelable: true</code> の指定なく呼び出した場合、効果がありません。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate"><em>event</em>.preventDefault();
</pre>
<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 notranslate">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 notranslate"><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" name="Result">結果</h4>
<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="/ja/docs/Learn/HTML/Forms/Form_validation">ネイティブの HTML フォーム検証</a>を代わりに使用する必要があります。</p>
<h4 id="HTML_2">HTML</h4>
<p>こちらがフォームです。</p>
<pre class="brush: html notranslate"><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>ユーザが無効なキーを押したときに描画する警告ボックスには、CSS を少し使用します。</p>
<pre class="brush: css notranslate">.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 コードです。まず、{{domxref("Element/keypress_event", "keypress")}} イベントを待ち受けします。</p>
<pre class="brush: js notranslate">var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener('keypress', checkName, false);
</pre>
<p><code>checkName()</code> 関数は押されたキーを調べ、それを許可するかどうかを決定します。</p>
<pre class="brush: js notranslate">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 notranslate">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="結果">結果</h4>
<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p>
<h2 id="Notes" name="Notes">注記</h2>
<p>イベントフローのいずれかの段階でイベントをキャンセルする途中で <code>preventDefault()</code> を呼び出すと、通常はブラウザの実装によって処理される既定のアクションが動作しなくなり、結果としてイベントが発生しなくなります。</p>
<p>イベントがキャンセル可能かどうかは {{domxref("event.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="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.Event.preventDefault")}}</p>
|
