---
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>