event.preventDefault

概述

如果事件可取消,则取消该事件,而不停止事件的进一步传播。

语法

event.preventDefault();

例子

切换复选框是单击复选框的默认操作。此示例演示如何防止这种情况发生:

<!DOCTYPE html>
<html>
<head>
<title>preventDefault 示例</title>
</head>
<body>
<p>请点击复选框控件</p>
<form>
<input type="checkbox" id="my-checkbox" />
<label for="my-checkbox">Checkbox</label>
</form>
<script>
    function stopDefAction(evt) {
        alert("preventDefault会阻止该复选框被勾选.")
        evt.preventDefault();
    }
    document.getElementById('my-checkbox').addEventListener(
        'click', stopDefAction, false
    );
</script>
</body>
</html>

你可以在这里看到preventDefault方法的具体行为.

下例演示了如何使用preventDefault()方法来阻止一个input元素内非法字符的输入.

<!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>
</head>
<body>
<p>请输入一些字母,只允许小写字母.</p>
<form>
<input type="text" id="my-textbox"/>
</form>
<script type="text/javascript">
function checkName(evt) {
var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      alert("只能输入小写字母." + "\n"
            + "charCode: " + charCode + "\n"
      );
    }
  }
}
document.getElementById('my-textbox').addEventListener(
    'keypress', checkName, false
 );
</script>
</body>
</html>

备注

在事件触发后的任何阶段调用preventDefault方法来取消该事件,意味着该事件的所有默认动作都不会发生.

Gecko 6.0 note
(Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)

调用事件的preventDefault()方法后,会引起该事件的 event.defaultPrevented 属性值变为true.

你可以查看 event.cancelable 属性来判断一个事件的默认动作是否可以被取消. 在cancelable属性为false的事件上调用 preventDefault 方法没有任何效果.

preventDefault 方法不会阻止该事件的进一步冒泡. event.stopPropagation 方法才有这样的功能.

 

规范

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

文档标签和贡献者

 此页面的贡献者: xgqfrms-GitHub, zhangboyuan-XD, teoli, AshfaqHossain, ziyunfei
 最后编辑者: xgqfrms-GitHub,