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

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

.isPropagationStopped( )stopPropagationメソッドが実行されたかを調査

構文

stopPropagationメソッドが実行されたかを調査返値:true/false
イベントオブジェクト.isPropagationStopped( )ver1.3〜

機能

イベントオブジェクトに対しisPropagationStoppedメソッドを利用すると、そのイベントオブジェクトがstopPropagationメソッドを実行したか否かを調査します。利用していた場合はtrueを、していない場合はfalseを返します。

このメソッドはstopPropagationメソッドを先に理解している必要があります。

解説

stopPropagationメソッドが実行されたかを調査する

サンプル(isPropagationStopped/01.html)を開いてbody内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、div要素がクリックされたらstopPropagationメソッドを利用して、バブリングを停止しています。そして3行目でisPropagationStoppedメソッドを利用しているか否かを調査し、その結果をアラートで表示します。

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

結果として、div要素をクリックするとアラートで「true」と表示されます。

stopPropagationメソッドを利用しないサンプルも用意しました。
サンプル(isPropagationStopped/01b.html)を開いて、以下の様にstopPropagationメソッドがコメントアウトされているのを確認して下さい。

$("div").click(function(eo){
	//eo.stopPropagation();
	alert(eo.isPropagationStopped());
});

結果として、div要素をクリックするとアラートで「false」と表示されます。

メモ

イベントオブジェクトを使いまわす

何となく、少しややこしいサンプルを作成してみました。イベントオブジェクトは引数で他のfunctionに渡すことができます。渡された先のfunctionでstopPropagationメソッドを利用を利用されても、isPropagationStoppedメソッドできちんと調査できます。

サンプル(isPropagationStopped/test01.html)のjQueryは以下の様に記述されています。4行目でクリック時に実行するfunctionが設定されており、5行目でイベントオブジェクトをaaaFuncに渡しています。そしてaaaFunc(1〜3行目)で、そのイベントオブジェクトに対しstopPropagationメソッドを利用しました。

function aaaFunc(myEO){
	myEO.stopPropagation();
}
$("div").click(function(eo){
	aaaFunc(eo);
	alert(eo.isPropagationStopped());
});

イベントオブジェクト名は「eo」から「myEO」になっていますが、イベントオブジェクトとしては同一(参照の値渡し)のため、6行目の「eo.isPropagationStopped()」によって、stopPropagationメソッドの利用を確認することができます。