MDN Web 技术文档 - event.preventDefault


在本文章中
  1. 概述
  2. 语法
  3. 例子
  4. 备注
  5. 规范

概述

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

语法

event.preventDefault();

例子

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


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

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

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


<html>
<head>
<title>preventDefault exampletitle>
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

文档标签和贡献者

对本页有贡献的人:  ziyunfei
最后编辑者:  ziyunfei, May 15, 2014 10:19:17 PM



你可能感兴趣的:(平台-Html5,语言-JavaScript,<=即时总结=>)