blob: cc39be846eccdd3686f8b1aebdcf1bfe25ecfe71 (
plain)
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
|
---
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">Resumo</h2>
<p>Cancela o evento se for cancelável, sem parar a propagação do mesmo.</p>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
<pre class="syntaxbox"><em>event</em>.preventDefault();</pre>
<h2 id="Example" name="Example">Exemplo</h2>
<p>Alternar é a ação padrão de clicar em uma caixa de seleção. Este exemplo demonstra como impedir que isso aconteça:</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>
<script>
function stopDefAction(evt) {
evt.preventDefault();
}
document.getElementById('my-checkbox').addEventListener(
'click', stopDefAction, false
);
</script>
</head>
<body>
<p>Please click on the checkbox control.</p>
<form>
<input type="checkbox" id="my-checkbox" />
<label for="my-checkbox">Checkbox</label>
</form>
</body>
</html></pre>
<p>Você pode ver o <code>preventDefault</code> em ação <a class="internal" href="/samples/domref/dispatchEvent.html" title="samples/domref/dispatchEvent.html">aqui</a>.</p>
<p>O exemplo a seguir demonstra como um input com texto inválido pode ser parado ao chegar ao campo de entrada com o 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>Aqui está o resultado do código anterior:</p>
<p>{{ EmbedLiveSample('preventDefault_invalid_text', '', '', '') }}</p>
<h2 id="Notes" name="Notes">Notas</h2>
<p>Chamar preventDefault durante qualquer fase do fluxo de eventos cancela o evento, o que significa que qualquer ação padrão normalmente feita pela aplicação como um resultado do evento não ocorrerá.</p>
<div class="note">
<p><strong>Nota:</strong> A partir do {{Gecko("6.0")}}, chamar o <code>preventDefault()</code> faz com que o {{ domxref("event.defaultPrevented") }} se torne true.</p>
</div>
<p>Você pode usar o <a href="/en-US/docs/Web/API/event.cancelable" title="/en-US/docs/Web/API/event.cancelable">event.cancelable</a> para checar se o evento é cancelável. Chamar o <code>preventDefault</code> para um evento não cancelável não fará efeito.</p>
<p><code>Se o preventDefault não parar a propagação do evento através do DOM. event.stopPropagation deve ser usada para isso.</code></p>
<h2 id="Specification" name="Specification">Especificação</h2>
<ul>
<li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault">DOM Level 2 Events: preventDefault</a></li>
</ul>
|
