概述
如果事件对象的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="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 方法才有这样的功能.