preventDefault()について

preventDefault()について

Posted at November 21,2013 2:33 AM
Tag:[JavaScript, preventDefault]

jQueryおよびJavaScriptのpreventDefault()について調べてみました。

1.preventDefault()とは

preventDefault()は、実行したイベントがキャンセル可能である場合、イベントをキャンセルするためのメソッドです。

「イベント」とは、分かりやすい例で言うと、フォームのテキストエリアの入力やチェックボックスのチェック、リンクのクリックなどが挙げられます。

preventDefault()でイベントがキャンセルされると、テキストエリアの入力やチェックボックスのチェック、あるいはリンク先への遷移は行われません。

なお、上位ノードへのイベントの伝播 (propagation) は止めません。上位ノードへのイベントの伝播を止めるにはstopPropagation()を利用します。

2.イベントをキャンセルするサンプル

ここではjQueryを使ってテキストエリアに半角英小文字しか入力できないサンプルを作ってみました。

サンプル1

サンプル1のコード(抜粋)は以下となります。

<p>半角英小文字のみ入力できます</p>
<input type="text" id="test" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("#test").keypress(function(event) {
    var charCode = event.charCode;
    if (charCode != 0 && (charCode < 97 || charCode > 122)) {
        event.preventDefault();
        alert("半角英小文字しか入力できません");
    }
});
</script>

フォームに半角英小文字以外の文字を入力するとevent.preventDefault()が実行されてフォームの入力は行われず、alert()を実行します。

JavaScriptの同様サンプルは、以下のページに掲載されています。

event.preventDefault

JavaScriptでイベントを登録する場合は次のようにします。

document.getElementById('test').addEventListener('click', stopAction, false );

stopActionは次のようなメソッドになります。

function stopAction() {
    var charCode = event.charCode;
    if (charCode != 0 && (charCode < 97 || charCode > 122)) {
        event.preventDefault();
        alert("半角英小文字しか入力できません");
    }
}

3.イベントの伝播が分かるサンプル

イベントはキャンセルしつつ、イベントの伝播が行われるサンプルも作りました。

サンプル2

サンプル2のコード(抜粋)は以下となります。

<div id="grandparent">
  <div id="parent">
    <a id="child" href="index.html">サンプル1のページに移動</a>
  </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function myHandler(event){
    event.preventDefault();
    alert("クリックされたターゲット要素:" + event.currentTarget.tagName);
}
$("#child").on("click", myHandler );
$("#parent").on("click", myHandler );
$("#grandparent").on("click", myHandler );
</script>

親要素、子要素、孫要素のそれぞれについてclickイベントを登録し、孫要素のa要素をクリックすると、preventDefault()でイベントがキャンセルされます(=ページの移動は行われない)が、イベントの伝播はキャンセルされないので、クリックイベントは親要素に伝播されて親要素のalert()が実行されます。

JavaScriptでイベントを登録する方法は2項と同じなので割愛します。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)