小粋空間  -  a cheap joke and a play on words site

preventDefault()について

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

１．preventDefault()とは

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

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

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

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

２．イベントをキャンセルするサンプル

ここでは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("半角英小文字しか入力できません");
    }
}

３．イベントの伝播が分かるサンプル

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

サンプル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でイベントを登録する方法は２項と同じなので割愛します。