DOM:event.preventDefault
出典: MDC
目次 |
[編集] 概要
イベントがキャンセル可能である場合、イベントのさらなる伝播 (propagation) を止めずに、そのイベントをキャンセルします。
[編集] 構文
event.preventDefault()
[編集] 例
チェックボックスの切り替えが、チェックボックスをクリックしたときの既定のアクションです。この例では、その動作を止める方法を説明します。
<html>
<head>
<title>preventDefault の例</title>
<script type="text/javascript">
function stopDefAction(evt) {
evt.preventDefault();
}
</script>
</head>
<body>
<p>チェックボックスコントロールをクリックしてください。</p>
<form>
<input type="checkbox" onclick="stopDefAction(event);"/>
<label for="checkbox">チェックボックス</label>
</form>
</body>
</html>
preventDefault の実例を こちら で見ることができます。
以下の例では、preventDefault() を使って、不正なテキストが入力欄に入力されるのを防ぐ方法を説明しています。
<html>
<head>
<title>preventDefault の例</title>
<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"
);
}
}
}
</script>
</head>
<body>
<p>あなたの名前を小文字のみで入力してください。</p>
<form>
<input type="text" onkeypress="checkName(event);"/>
</form>
</body>
</html>
[編集] 注意点
イベントフローのいずれかの段階でイベントをキャンセルする途中で preventDefault を呼び出すと、通常はブラウザの実装によって処理される既定のアクションが動作しなくなり、結果としてイベントが発生しなくなります。
イベントがキャンセル可能かどうかは event.cancelable を使って確認できます。キャンセル不可能なイベントに対して preventDefault を呼び出しても効果はありません。
preventDefault は、DOM を通じたイベントのさらなる伝播を止めません。伝播を止めるには event.stopPropagation を使ってください。