initial commit

1 files changed, 170 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/event/preventdefault/index.html b/files/zh-cn/web/api/event/preventdefault/index.html
new file mode 100644
index 0000000000..643b1be269
--- /dev/null
+++ b/files/zh-cn/web/api/event/preventdefault/index.html
@@ -0,0 +1,170 @@
+---
+title: event.preventDefault
+slug: Web/API/Event/preventDefault
+tags:
+  - API
+  - DOM
+  - Event
+  - preventDefault
+translation_of: Web/API/Event/preventDefault
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{domxref("Event")}} 接口的 <code><strong>preventDefault()</strong></code>方法，告诉{{Glossary("user agent")}}：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用{{domxref("Event.stopPropagation", "stopPropagation()")}} 或{{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}，才停止传播。</p>
+
+<h3 id="Syntax" name="Syntax">语法</h3>
+
+<pre class="eval"><em>event</em>.preventDefault();
+
+</pre>
+
+<h3 id="参数">参数</h3>
+
+<p>无</p>
+
+<h3 id="返回值">返回值</h3>
+
+<p><code>undefined</code></p>
+
+<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">document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+         document.getElementById("output-box").innerHTML += "Sorry! &lt;code&gt;preventDefault()&lt;/code&gt; won't let you check this!&lt;br&gt;";
+         event.preventDefault();
+}, false);</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Please click on the checkbox control.&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;label for="id-checkbox"&gt;Checkbox:&lt;/label&gt;
+  &lt;input type="checkbox" id="id-checkbox"/&gt;
+&lt;/form&gt;
+
+&lt;div id="output-box"&gt;&lt;/div&gt;</pre>
+
+<h4 id="结果">结果</h4>
+
+<p>你可以看到如下的行为:</p>
+
+<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="/zh-CN/docs/Learn/HTML/Forms/Data_form_validation">原生的HTML表单验证</a>来代替。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>表单:</p>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;p&gt;Please enter your name using lowercase letters only.&lt;/p&gt;
+
+  &lt;form&gt;
+    &lt;input type="text" id="my-textbox"&gt;
+  &lt;/form&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>当用户按下一个有效按键的时候，我们就给这个warning box 加上一些样式：</p>
+
+<pre class="brush: css">.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代码。首先，监听{{event("keypress")}}事件：</p>
+
+<pre class="brush: js"><code>var myTextbox = document.getElementById('my-textbox');
+myTextbox.addEventListener('keypress', checkName, false);</code></pre>
+
+<p> <code>checkName()</code>方法可以监听按键并且决定是否允许按键的默认行为发生。</p>
+
+<pre class="brush: js">function checkName(evt) {
+  var charCode = evt.charCode;
+  if (charCode != 0) {
+    if (charCode &lt; 97 || charCode &gt; 122) {
+      evt.preventDefault();
+      displayWarning(
+        "Please use lowercase letters only."
+        + "\n" + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}</pre>
+
+<p><code>displayWarning()</code>方法显示了一个问题的通知。这不是一种优雅的方法，但是确实可以达到我们的目的。</p>
+
+<pre class="brush: js">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="结果_2">结果</h4>
+
+<p>这里就是代码的执行结果:</p>
+
+<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p>
+
+<h2 id="备注"><font><font>备注</font></font></h2>
+
+<p>在事件流的任何阶段调用<code>preventDefault()</code>都会取消事件，这意味着任何通常被该实现触发并作为结果的默认行为都不会发生。</p>
+
+<p>你可以使用 {{domxref("Event.cancelable")}} 来检查该事件是否支持取消。为一个不支持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="浏览器兼容">浏览器兼容</h2>
+
+<p>{{Compat("api.Event.preventDefault")}}</p>