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

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

.stopPropagation( )バブリングを停止

構文

バブリングを停止返値:なし
イベントオブジェクト.stopPropagation( )ver1.0〜

機能

イベントオブジェクトにstopPropagationメソッドを利用するとバブリングを停止し、イベントの伝播を止めます。バブリングとはイベントが先祖要素方向に伝播するイベントの流れのことです。

バブリングについては使い方で紹介しています。→参考:使い方「イベントフロー(1)」

解説

バブリングを停止しないサンプル

まずはバブリングを停止しないサンプルを確認します。サンプル(stopPropagation/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属性をアラートで表示します。

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

このサンプルで一番内側に配置された緑のdiv要素をクリックしてください。1回しかクリックしていないのにアラートが3回表示されます。これは緑のdiv要素で発生したクリックイベントがバブリングし赤や青のdiv要素に伝わるためです。セレクタでdiv要素が設定されているため、赤や青のdiv要素でもfunctionが実行されるのです。

バブリングを停止する

ではバブリングを停止したサンプルを確認します。サンプル(stopPropagation/02.html)を開いてbody内の構成がstopPropagation/01.htmlと同じ事を確認してください。

jQueryもほとんど同じで、異なるのは以下の様にstopPropagationメソッドが追加されただけです。stopPropagationメソッドはイベントオブジェクトに対して利用します。

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

この処理によってバブリングが停止されるため、緑のdiv要素をクリックしてもイベントが親のdiv要素に伝わらずアラートは1回しか表示されません。

関連項目

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

またイベント発生時に実行するfunction内でfalseを返すとバブリングを停止し、ブラウザ標準の機能も実行しないようにできます。→使い方:イベントフロー(2)「return falseについて」

メモ

デリゲートの仕組みとバブリング

delegateメソッドやdelgateメソッドの構文を利用したonメソッドでは、バブリングしてきたイベントを調査範囲でキャッチしセレクタと比較してマッチすればfunctionを実行していると「私は」思っています。

であるとするなら、デリゲートの仕組みを利用しているところでstopPropagationメソッドを利用すると、イベントの発生が感知できず、functionが実行されないのでは?と思ったのです。

で、確認のためにサンプル(stopPropagation/test01.html)を作成しました。stopPropagation/02.htmlからの変更点は以下の様にonメソッド(delegateメソッドの構文)に変更しただけです。

$("body").on("click", "div", function(eo){
	alert(eo.target.id);
	eo.stopPropagation();
});

確認すると、stopPropagation/02.htmlと同様に問題なく機能します。

改めて本家のページを確認すると、「Additional Notes」で以下の様な説明があります。
These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

stopPropagationは「イベントを削除しているのではなくハンドラ(function)が実行されるのを防ぐ」という感じなのでしょうか?、だからイベント自体は調査範囲の所まで上って問題なく機能する?。よく分かりませんが、デリゲートの仕組みでも問題なくstopPropagationメソッドが利用できるということを覚えておこうと思います。