stopPropagationとstopImmediatePropagation
package
{
import com.bit101.components.PushButton;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Point;
/**
* イベントフローチュートリアル、その2
* stopPropagationとstopImmediatePropagation
* @author Hiiragi
*
* その1 http://wonderfl.net/c/mIMo
*
*
* 10個のボールがあります。
* Ball10はBall9に入っていて、Ball9はBall8に入っていて・・・と、
* 段々の入れ子になってます。
*
* で、それぞれのボールにクリック用ハンドラを2つ付けています。
* 1つ目がcurrentTargetのxに20をプラス
* 2つ目がcurrentTargetのyに20をプラス
* クリックすると、その順番で関数が実行されます。
*
* まず起動した直後にどれかボールをクリックすると、
* イベントフローの規則に従ってボールが移動します。
* 上から順にやると判りやすいかと思います。
*
*
* さて、下のほうにresetとフラグ切り替え用ボタンがあり、
* フラグ切り替えは
* "normal"
* "stopPropagation"
* "stopImmediatePropagation"
* の順で切り替わります。
*
* 切り替えられたフラグは、ターゲットにイベントが辿り着いた際に作用します。
*
* 切り替えた状態で、どれかボールをクリックすると、
* イベントフローとフラグに従ってボールが動きます。
*
* stopPropagationフラグを立てておくと、
* そのボールのリスナーが2つ実行し終わった後、
* それ以上バブリングしていないことが判ります。
*
* stopImmediatePropagationフラグを立てておくと、
* そのボールのリスナーの1つ目が終わったら、2つ目が実行されず、
* それ以上バブリングしないことが判ります。
*
*/
[SWF(width = 465, height = 465, frameRate = 30, backgroundColor = 0xFFFFFF)]
public class EventFlowTutorial2 extends Sprite
{
private const BALL_RADIUS:uint = 15;
private const BALL_COUNT:uint = 10;
private var _btn1:PushButton;
private var _btn2:PushButton;
private var _container:Sprite;
private var _ballArray:Array;
private var _stopFlag:int;
private var _flagTextArray:Array;
public function EventFlowTutorial2()
{
_flagTextArray = ["normal", "stopPropagation", "stopImmediatePropagation"];
_stopFlag = 0;
_btn1 = new PushButton(this, 10, 430, "reset", reset);
_btn2 = new PushButton(this, 100, 430, _flagTextArray[_stopFlag], stopFlagChange);
_btn2.setSize(100, 20);
_container = this;
_ballArray = [];
for (var i:int = 0; i < BALL_COUNT; i++)
{
var item:Ball = new Ball(BALL_RADIUS, Math.random() * 0xFFFFFF);
item.y = BALL_RADIUS * 2;
item.setText("Ball" + i);
item.addEventListener(MouseEvent.CLICK, onClickHandler1);
item.addEventListener(MouseEvent.CLICK, onClickHandler2);
_container.addChild(item);
_container = item;
_ballArray.push(item);
}
_ballArray[0].x = 20;
this.stage.addEventListener(MouseEvent.CLICK, resetBallText, true);
}
private function reset(e:MouseEvent):void
{
var len:uint = _ballArray.length;
for (var i:int = 0; i < len; i++)
{
var item:Ball = _ballArray[i];
item.x = 0;
item.y = BALL_RADIUS * 2;
}
_ballArray[0].x = 20;
resetBallText();
}
private function resetBallText(e:MouseEvent = null):void
{
var len:uint = _ballArray.length;
for (var i:int = 0; i < len; i++)
{
var item:Ball = _ballArray[i];
item.setText("Ball" + i);
}
}
private function onClickHandler1(e:MouseEvent):void
{
var ball:Ball = e.currentTarget as Ball;
ball.x += 20;
if (e.currentTarget == e.target)
{
ball.setText(ball.getText() + "(target)");
}
else
{
ball.setText(ball.getText() + "(bubbling)");
}
ball.setText(ball.getText() + "(runHandler1)");
if (_stopFlag == 1)
{
e.stopPropagation();
}
else if (_stopFlag == 2)
{
e.stopImmediatePropagation();
}
}
private function onClickHandler2(e:MouseEvent):void
{
var ball:Ball = e.currentTarget as Ball;
ball.y += 20;
ball.setText(ball.getText() + "(runHandler2)");
}
private function stopFlagChange(e:MouseEvent):void
{
_stopFlag = (_stopFlag >= _flagTextArray.length - 1) ? 0 : ++_stopFlag;
_btn2.label = _flagTextArray[_stopFlag];
}
}
}
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
class Ball extends Sprite
{
private var _color:uint;
private var _radius:Number;
private var _tField:TextField;
public function Ball(radius:Number = 50, color:uint = 0)
{
_tField = new TextField();
_tField.autoSize = TextFieldAutoSize.LEFT;
_tField.textColor = 0x666666;
this.addChild(_tField);
_radius = radius;
_color = color;
draw();
}
public function draw(color:uint = 0):void
{
if (color) _color = color;
var g:Graphics = this.graphics;
g.beginGradientFill(GradientType.RADIAL, [_color, 0xFFFFFF], [1, 1], [0, 127]);
g.drawCircle(0, 0, _radius);
g.endFill();
_tField.x = _radius;
}
public function getText():String { return _tField.text; }
public function setText(text:String):void
{
_tField.text = text;
}
}