Event.preventDefault()

在此页

句法
范例
注意事项
规范
浏览器兼容性
相关话题

事件 接口的 preventDefault() 方法告诉用户代理若事件未获得明确处理，就不应该像通常那样接受其默认动作。事件继续照常传播，除非某一事件监听器调用 stopPropagation() or stopImmediatePropagation() , either of which terminates propagation at once.

如下所述，调用 preventDefault() 对于不可取消事件，如某一分派凭借 EventTarget.dispatchEvent() ，不指定 cancelable: true 不起作用。

句法

event.preventDefault();

范例

阻塞默认点击处理

切换复选框是点击复选框的默认动作。此范例演示如何阻止这种情况的发生：

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>

结果

停止击键从到达编辑字段

The following example demonstrates how invalid text input can be stopped from reaching the input field with preventDefault() . Nowadays, you should usually use native HTML form validation 代替。

HTML

Here's the form:

<div class="container">
  <p>Please enter your name using lowercase letters only.</p>
  <form>
    <input type="text" id="my-textbox">
  </form>
</div>

CSS

We use a little bit of CSS for the warning box we'll draw when the user presses an invalid key:

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

JavaScript

And here's the JavaScript code that does the job. First, listen for keypress 事件：

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

checkName() function, which looks at the pressed key and decides whether to allow it:

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() function presents a notification of a problem. It's not an elegant function but does the job for the purposes of this example:

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

结果

注意事项

调用 preventDefault() 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.

可以使用 Event.cancelable to check if the event is cancelable. Calling preventDefault() for a non-cancelable event has no effect.

规范

规范	状态	注释
DOM 在该规范中的 Event.preventDefault() 定义。	实时标准
DOM (文档对象模型) 2 级事件规范在该规范中的 Event.preventDefault() 定义。	过时	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`preventDefault`	Chrome 1	Edge 12	Firefox 1	IE 9	Opera 7	Safari 1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0

图例

完整支持

元数据

最后修改： Mar 29, 2020

DOM (文档对象模型)
事件
构造函数
1. 事件
特性
方法
1. composedPath
2. initEvent
3. msConvertURL()
4. preventDefault
5. stopImmediatePropagation
6. stopPropagation
事件
1. bubbles
2. cancelable
3. cancelBubble
4. composed
5. composedPath
6. currentTarget
7. defaultPrevented
8. 事件
9. eventPhase
10. initEvent
11. isTrusted
12. preventDefault
13. returnValue
14. stopImmediatePropagation
15. stopPropagation
16. target
17. timeStamp
18. type
DOM 相关页面

在此页

句法

范例

阻塞默认点击处理

JavaScript

HTML

结果

停止击键从到达编辑字段

HTML

CSS

JavaScript

结果

注意事项

规范

浏览器兼容性

图例

相关话题