event.preventDefault

概述

如果事件对象的cancelable属性为true,则该方法可以取消事件的默认动作.但并不取消事件的冒泡行为.

语法

event.preventDefault();

例子

点击一个复选框时,触发click事件.该事件的默认动作是切换复选框的选择状态.下例演示了如何取消这个默认动作的发生:

<!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>
</head>
<body>
<p>请点击下面的复选框.</p>
<form>
<input type="checkbox" id="my-checkbox" />
<label for="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 方法才有这样的功能.

规范

DOM Level 2 Events: preventDefault

文档标签和贡献者

 此页面的贡献者: teoli, AshfaqHossain, ziyunfei
 最后编辑者: teoli,