TopJavaScriptjQuery > 2013年11月
2013年11月22日

stopPropagation()について

November 22,2013 1:55 AM
Tag:[, ]
Permalink

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

1.stopPropagation()とは

stopPropagation()は、現在のイベントの親要素への伝播(propagation)止めるためのメソッドです。

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

stopPropagation()でイベントの伝播がキャンセルされると、テキストエリアの入力やチェックボックスのチェック、リンクのクリックなどのイベントの伝播は行われません。

なお、stopPropagation()でイベントのキャンセル自体は行われません。イベントのキャンセルを行うにはpreventDefault()を利用します。

2.イベント伝播を止めるサンプル

ここではjQueryを使ってイベント伝播のサンプルを作ってみました。

イベント伝播を止めるサンプル
イベント伝播を止めないサンプル

イベント伝播を止めるサンプルのコード(抜粋)は以下となります。

<div id="grandparent">
  <div id="parent">
    <div id="child">クリックするとアラートを表示</a>
  </div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$("div").on("click", function(event){
    event.stopPropagation();
    alert("クリックされたターゲット要素:" + event.currentTarget.tagName);
});
</script>

一番内側のdiv要素をクリックすると、イベント伝播を止めないサンプルは3回alert()が実行されますが、イベント伝播を止めるサンプルはevent.preventDefault()が実行されているため、alert()は1回しか実行されません。

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

<div id="grandparent">
  <div id="parent">
    <div id="child">クリックするとアラートを表示</a>
  </div>
</div>
<script>
function myHandler(event){
    event.stopPropagation();
    alert("クリックされたターゲット要素:" + event.currentTarget.tagName);
}
document.getElementById('child').addEventListener('click', myHandler, false );
document.getElementById('parent').addEventListener('click', myHandler, false );
document.getElementById('grandparent').addEventListener('click', myHandler, false );
</script>

addEventListenerの第3引数にfalseを指定しておくのがポイントです。

Comments [0] | Trackbacks [0]
2013年11月21日

preventDefault()について

November 21,2013 2:33 AM
Tag:[, ]
Permalink

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 &amp;&amp; (charCode &lt; 97 || charCode &gt; 122)) {
        <span class="attn">event.preventDefault();</span>
        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項と同じなので割愛します。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3