topical media & game development

talk show tell print

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.