createjs event bubbing

by Yanan Tian

HTML

<canvas width="400" height="300" id="mineCanvas"></canvas>
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/soundjs-0.6.2.min.js"></script>
<script src="https://code.createjs.com/preloadjs-0.6.2.min.js"></script>

JavaScript

var stage = new createjs.Stage("mineCanvas"),
    canvas = stage.canvas,
    CW = canvas.width,
    CH = canvas.height;

var txt, background, label, button;

stage.name = 'stage';
stage.addChild(button = new createjs.Container())
	.set({x: 10, y: 10});
button.name = 'button';
//button.mouseChildren = false;
//button.mouseEnabled = false;

button.addChild(background = new createjs.Shape())
	.set({x: 0, y: 0})
  .graphics
  .f('red')
  .drawRoundRect(0, 0, 150, 60, 10);
background.name = 'background';

button.addChild(label = new createjs.Text('点击', 'bold 55px monospace', '#fff')).set({x: 150 / 2, y: 60 / 2});
label.textAlign = 'center';
label.textBaseline = 'middle';
label.cursor = 'pointer';
label.name = 'label';

stage.update();

var targets = [stage, button, label, background], tar;

for(var i=0, l=targets.length; i<l; i++){
	tar = targets[i];
  tar.on('click',handleClick,null,false,null,false);
  tar.on('click',handleClick,null,false,null,true);
  //tar.addEventListener("click", handleClick, false);
  //tar.addEventListener("click", handleClick, true);
}

stage.addChild(txt = new createjs.Text('', '13px Arial', '#000'));
txt.x = 170;
txt.y = 10;
txt.lineHeight = 20;
txt.textAlign = 'left';
txt.textBaseline = 'top';

function handleClick(evt){

	if(evt.currentTarget == stage && evt.eventPhase == 1){
		txt.text = "target : 阶段 : currentTarget\n";
  }
  txt.text += evt.target.name+" : "+evt.eventPhase+" : "+evt.currentTarget.name+"\n";

  if(evt.currentTarget == stage && evt.eventPhase == 3){
	  stage.update();
  }
}