topical media & game development
mobile-graphic-easel-tutorials-Mouse-Interaction-container.htm / htm
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: Container events</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
<script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, output;
function init() {
stage = new createjs.Stage("demoCanvas");
// this lets our drag continue to track the mouse even when it leaves the canvas:
//stage.mouseMoveOutside = true;
var background = new createjs.Shape();
background.name = "background";
background.graphics.beginFill("red").drawRoundRect(0, 0, 200, 60, 10);
var label = new createjs.Text("click me!", "bold 24px Arial", "#FFFFFF");
label.name = "label";
label.textAlign = "center";
label.textBaseline = "middle";
label.x = 200/2;
label.y = 60/2;
var button = new createjs.Container();
button.name = "button";
button.x = 50;
button.y = 25;
button.addChild(background, label);
stage.addChild(button);
background.addEventListener("click", handleClick);
label.addEventListener("click", handleClick);
// if we define a handler on button, then it will be called, but handlers
// on the children will not. You can comment out the next line to test:
button.addEventListener("click", handleClick);
createjs.Ticker.addListener("tick", stage);
stage.update();
}
function handleClick(evt) {
alert("Clicked on: "+evt.target.name);
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="100">
alternate content
</canvas>
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.