stopPropagationの使いどころ
package
{
import com.bit101.components.PushButton;
import com.bit101.components.TextArea;
import flash.display.Sprite;
import flash.events.MouseEvent;
/**
* stopPropagationの使いどころ
* @author Hiiragi
*
* 使う時が来てしまったので、ついでにチュートリアル的な。
* イベントフローを理解してること前提で書きます。
*
* これは「ボタンを押したらステージにonClickHandlerのリスナーをつける」ものです。
* ですが、現状、ボタンを押すと、リスナーを付けた直後に、
* テキストエリアに"hoge"が出力されます。
*
* これは、イベントフローのバブリング時の最後にステージを通ってることが原因です。
* フローの途中でステージにaddEventListenerされ、
* 最後にステージを通る時にそのリスナーが呼び出されてしまうという、
* 仕組みさえわかってしまえば当たり前な流れです。
*
* で、この回避策。それがstopPropagationです。
* これは現在実行されているリスナー関数が関連付けられているオブジェクトを最後に
* イベントフローを止めてしまうものです。
*
* なお、似たようなものにstopImmediatePropagationがありますが、
* これは、同じオブジェクトにいくつリスナーが関連付けられていようとも、
* 現在実行している関数まででイベントフローを「即座に(Immediate)」に止めてしまうものです。
*
* そんなわけで、これらを使ってしまえば、ステージにaddEventListenerしたとしても
* バブリングがそこで止まってしまうのでステージに行かずに実行されないということです。
*
* 文章だと判りづらいかと思いますので、forkなりダウンロードなりで、
* 下部でコメントアウトしている部分をアンコメントして確かめてみると判りやすいかと思います。
*
* 追記：
* 別の方法としてステージにaddEventListenerをするときにuseCaptureをtrueにする方法もあります。
* でも、仕組みを知らずに使うと混乱を招きますし、パフォーマンスの低下もあるみたいなので、
* 使う場合はちゃんとフローを設計する必要があるかと思います。
*
*/
public class EventFlowTutorial1 extends Sprite
{
private var _btn:PushButton;
private var _txtArea:TextArea;
public function EventFlowTutorial1()
{
_btn = new PushButton(this, 100, 100, "addEventListenerToStage", addEventListenerToStage);
_btn.setSize(200, 30);
_txtArea = new TextArea(this, 100, 150);
}
private function addEventListenerToStage(e:MouseEvent):void
{
this.stage.addEventListener(MouseEvent.CLICK, onClickHandler);
//下記スクリプトのどちらをアンコメントしても、出なくなります。
//e.stopPropagation();
//e.stopImmediatePropagation();
}
private function onClickHandler(e:MouseEvent):void
{
_txtArea.text += "hoge\r";
}
}
}