翻译正在进行中。

Event 接口的 preventDefault()方法,告诉user agent:如果此事件没有需要显式处理,那么它默认的动作也不要做(因为默认是要做的)。此事件还是继续传播,除非碰到事件侦听器调用stopPropagation()stopImmediatePropagation(),才停止传播。

语法

event.preventDefault();

参数

返回值

undefined

示例

阻止默认的点击事件处理Blocking default click handling

我们点击一个复选框checkbox的默认行为是触发这个复选框。下面这个例子说明了怎样阻止默认行为的发生:

JavaScript

document.querySelector("#id-checkbox").addEventListener("click", function(event) {
         document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
         event.preventDefault();
}, false);

HTML

<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox"/>
</form>

<div id="output-box"></div>

结果

你可以看到如下的行为:

在编辑域中阻止按键默认的行为

下面的这个例子说明了如何使用preventDefault()在文本编辑域中阻止有效的文本输入。如今,你通常可以使用原生的HTML表单验证来代替。

HTML

表单:

<div class="container">
  <p>Please enter your name using lowercase letters only.</p>

  <form>
    <input type="text" id="my-textbox">
  </form>
</div>

CSS

当用户按下一个有效案件的时候,我们就给这个warning box 加上一些样式:

.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}

JavaScript

这里是相关的JavaScript代码。首先,监听keypress事件:

var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener('keypress', checkName, false);

 checkName()方法可以监听按键并且决定是否允许按键的默认行为发生。

function checkName(evt) {
  var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      displayWarning(
        "Please use lowercase letters only."
        + "\n" + "charCode: " + charCode + "\n"
      );
    }
  }
}

displayWarning()方法显示了一个问题的通知。这不是一种优雅的方法,但是确实可以达到我们的目的。

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);
}

结果

这里就是代码的执行结果:

 

规范

Specification Status Comment
DOM
Event.preventDefault()
Living Standard  
Document Object Model (DOM) Level 2 Events Specification
Event.preventDefault()
Obsolete Initial definition.

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
preventDefaultChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

文档标签和贡献者

标签: 
最后编辑者: mdnwebdocs-bot,