デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.stopImmediatePropagation( )バブリングとイベント発生時の処理を停止

構文

バブリングとイベント発生時の処理を停止返値:なし
イベントオブジェクト.stopImmediatePropagation( )ver1.3〜

機能

イベントオブジェクトにstopImmediatePropagationメソッドを利用するとバブリングを停止し、さらに他に設定されたイベント発生時の処理(function)も停止します

stopImmediatePropagationメソッドはv1.3で追加されたstopPropagationメソッドの拡張版です。このメソッドを理解するためには、先にstopPropagationメソッドを理解するようにしてください。

解説

stopPropagationメソッド同様にバブリングを停止します

サンプル(stopImmediatePropagation/01.html)を開いてbody内に3つのdiv要素があることを確認してください。div要素はid属性が付けられ、内側(子孫要素)から「green」「red」「blue」となっています。

<div id="blue">
	<div id="red">
		<div id="green"></div>
	</div>
</div>

jQueryは以下の様に記述され、div要素をクリックするとfunctionに渡されたイベントオブジェクト「eo」のtargetプロパティでイベントが発生した要素を取得し、そのid属性をアラートで表示します。その後でstopImmediatePropagationメソッドを実行しバブリングを停止します。

$("div").click(function(eo){
	alert(eo.target.id);
	eo.stopImmediatePropagation();
});

stopImmediatePropagationメソッドでバブリングを停止しているため、一番内側に配置された緑のdiv要素をクリックしてもアラートは1回しか表示されません。この結果から、stopImmediatePropagationメソッドがstopPropagationメソッド同様にバブリングを停止していることが確認できます。

ちなみにstopImmediatePropagationメソッドを利用しないサンプル(stopPropagation/01.html)では、緑色のdiv要素をクリックするとアラートで「green」と3回表示されます。これは緑で発生したイベントが赤、青のdiv要素に伝わる(バブリングする)ためです。

他のイベント発生時の処理も停止します

stopImmediatePropagationメソッドはstopPropagationメソッドよりも強力で、他のイベント発生時の処理まで停止します。サンプル(stopImmediatePropagation/02.html)を開いてbody内にdiv要素が1つあることを確認してください。

jQueryでは、まず以下の部分を確認してください。div要素に「aaaFunc」と「bbbFunc」の2つのfunction(イベント発生時の処理)が設定されています(設定の順番が大切です、サンプルではaaaFuncの方がbbbFuncよりも先に設定しています)。

$(function () {
	$("div").click(aaaFunc);
	$("div").click(bbbFunc);
});

bbbFuncは「bbb」とアラートで表示するだけですが、aaaFuncには以下の様にstopImmediatePropagationが設定されています。

unction aaaFunc(eo){
	alert("aaa");
	eo.stopImmediatePropagation();
}

stopImmediatePropagationメソッドによってaaaFuncの次に実行されるはずのbbbFuncの実行が停止されるため、div要素をクリックしても「aaa」しかアラートで表示されません。

functionの設定順に注意

サンプルstopImmediatePropagation/02.htmlでは、aaaFuncがbbbFuncよりも先に設定されています。stopImmediatePropagationメソッドは設定されたfunctionよりも前に設定されたfunctionの実行を止めることはできません

サンプル(stopImmediatePropagation/02b.html)を開いてbody内の構成がstopImmediatePropagation/02.htmlと同じことを確認してください。jQueryもほとんど同じで、異なるのは以下の様にaaaFuncではなくbbbFuncにstopImmediatePropagationメソッドが設定されている点だけです。

function bbbFunc(eo){
	alert("bbb");
	eo.stopImmediatePropagation();
}

bbbFuncはaaaFuncよりも後に設定されているため、bbbFunc内にstopImmediatePropagationメソッドを設定しても、aaaFuncの実行を停止することはできません。実際にdiv要素をクリックすると「aaa」と「bbb」の2回アラートが表示されます。ですので、functionの設定順にも気を配るようにしましょう。

関連項目

バブリングは停止しても、他のイベント発生時の処理は実行したい場合はstopPropagationメソッドを利用します。 ブラウザ標準の機能を停止したい場合はpreventDefaultメソッドを利用します。