createjs events

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 circle, rect, txt;

stage.enableMouseOver(40);

stage.addChild(circle = new createjs.Shape())
	.set({x: 100, y: 100})
  .graphics.f('red').dc(0, 0, 50);

stage.addChild(rect = new createjs.Shape())
	.set({x: 300, y: 100})
  .graphics.f('blue').dr(-50, -50, 100, 100);

circle.cursor = 'pointer';
circle.name = 'circle';

rect.cursor = 'pointer';
rect.name = 'square';

stage.addChild(txt = new createjs.Text('','bold 13px monospace','#222'))
	.set({x: 10, y: 5});
txt.textBaseline = 'top';
txt.textAlign = 'center';//水平居中
txt.lineHeight = 18;

stage.update();

//测试点击与拖拽
circle.on("click", handleMouseEvent);
circle.on("dblclick", handleMouseEvent);
circle.on("mousedown", handleMouseEvent);
circle.on("pressmove", handleMouseEvent);
circle.on("pressup", handleMouseEvent);

//测试移入移出
rect.on("mouseover", handleMouseEvent);
rect.on("mouseout", handleMouseEvent);
rect.on("rollover", handleMouseEvent);
rect.on("rollout", handleMouseEvent);

function handleMouseEvent(evt) {
	txt.text = 'evt.target=' + evt.target + ', type=' + evt.type;
  txt.x = (txt.getMeasuredWidth() + 30) / 2;//水平居中
  
  //会先触发 click 再触发 pressup
  if(evt.type == 'click') console.log('click')
  if(evt.type == 'pressup') console.log('pressup')
  
  //先 rollover 再 mouseover
  if(evt.type == 'rollover') console.log('rollover')
  if(evt.type == 'mouseover') console.log('mouseover')
  
  //先 mouseout 再 rollout
  if(evt.type == 'rollout') console.log('rollout')
  if(evt.type == 'mouseout') console.log('mouseout')
  
  stage.update();
};