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
|
---
title: Event.preventDefault()
slug: Web/API/Event/preventDefault
tags:
- DOM
- preventDefault
- метод
- события
translation_of: Web/API/Event/preventDefault
---
<div>{{ apiRef("DOM") }}</div>
<div>Метод preventDefault () интерфейса {{domxref ("Event")}} сообщает {{Glossary("User agent")}}, что если событие не обрабатывается явно, его действие по умолчанию не должно выполняться так, как обычно. Событие продолжает распространяться как обычно, до тех пор, пока один из его обработчиков не вызывает методы {{domxref ("Event.stopPropagation", " stopPropagation ()")}} или {{domxref (" Event.stopImmediatePropagation", " stopImmediatePropagation ()")}}, любой из которых сразу же прекращает распространение.</div>
<div></div>
<div>Как отмечено ниже, вызов метода preventDefault () для события, не подлежащего отмене, например события, отправленного через {{domxref("EventTarget.dispatchEvent ()")}}, без указания cancelable: true не имеет эффекта.</div>
<h2 id="Syntax">Синтаксис</h2>
<pre class="syntaxbox"><em>event</em>.preventDefault();</pre>
<h2 id="Example">Пример</h2>
<p>По умолчанию щелчок по флажку переключает его состояние на противоположное. В этом примере показано, как предотвратить такое поведение:</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>Пример preventDefault</title>
<script>
function stopDefAction(evt) {
evt.preventDefault();
}
document.getElementById('my-checkbox').addEventListener(
'click', stopDefAction, false
);
</script>
</head>
<body>
<p>Пожалуйста, щёлкните по флажку.</p>
<form>
<input type="checkbox" id="my-checkbox" />
<label for="my-checkbox">Checkbox</label>
</form>
</body>
</html></pre>
<p>Вы можете посмотреть работу <code>preventDefault</code> в действии <a class="internal" href="/samples/domref/dispatchEvent.html" title="samples/domref/dispatchEvent.html">здесь</a>.</p>
<p>В следующем примере некорректный ввод останавливается и вводимый символ не добавляется в поле с <code>preventDefault()</code>.</p>
<div id="preventDefault_invalid_text">
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>Пример preventDefault</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(
"Пожалуйста, используйте только буквы нижнего регистра на латинице"
+ "\n" + "charCode: " + charCode + "\n"
);
}
}
}
</pre>
<pre class="brush: html"></script>
</head>
<body onload="Init ()">
<p>Пожалуйста, введите своё имя, используя только буквы нижнего регистра на латинице.</p>
<form>
<input type="text" id="my-textbox" />
</form>
</body>
</html></pre>
</div>
<p>Результат выполнения кода:</p>
<p>{{ EmbedLiveSample('preventDefault_invalid_text', '', '', '') }}</p>
<h2 id="Notes">Примечания</h2>
<p>Вызов <code>preventDefault</code> на любой стадии выполнения потока событий отменяет событие, а это означает, что любое действие по умолчанию обычно принимается реализацией, как результат события, которое не произойдёт.</p>
<div class="note">
<p><strong>Примечание:</strong> В {{Gecko("6.0")}}, вызов <code>preventDefault()</code> приводит к {{ domxref("event.defaultPrevented") }} к переходу значения в состояние <code>True</code>.</p>
</div>
<p>Вы можете использовать <a href="/en-US/docs/Web/API/event.cancelable" title="/en-US/docs/Web/API/event.cancelable">event.cancelable</a> чтобы проверить, является ли событие отменяемым. Вызов <code>preventDefault</code> для неотменяемых событий не имеет никакого эффекта.</p>
<p><code>preventDefault</code> не останавливает дальнейшее распространение событий на DOM. Для этого следует использовать <a href="/en-US/docs/Web/API/event.stopPropagation" title="/en-US/docs/Web/API/event.stopPropagation">event.stopPropagation</a>.</p>
<h2 id="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('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>
<p>первичное определение.</p>
</td>
</tr>
</tbody>
</table>
|
