diff options
Diffstat (limited to 'files/zh-tw/web/api/event/preventdefault/index.html')
| -rw-r--r-- | files/zh-tw/web/api/event/preventdefault/index.html | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/event/preventdefault/index.html b/files/zh-tw/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..8553f5a23a --- /dev/null +++ b/files/zh-tw/web/api/event/preventdefault/index.html @@ -0,0 +1,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> |