JSFiddle - React, Tailwind, and code Playground

by ling ding

HTML

<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<canvas id="demoCanvas" width="500" height="300">
    alternate content
</canvas>

JavaScript

var stage, output, lastPhase;
		
function init() {
    stage = new createjs.Stage("demoCanvas");
    stage.name = "stage";
    
    output = new createjs.Text("try clicking on the background vs the label text\n\nthe background & label are both inside of a Container named 'button'", "13px courier");
    output.lineWidth = 280;
    output.lineHeight = 13;
    output.x = 190;
    output.y = 10;
    
    
    var background = new createjs.Shape();
    background.name = "background";
    background.graphics.beginFill("red").drawRoundRect(0, 0, 150, 60, 10);
    
    var label = new createjs.Text("click me!", "bold 24px Arial", "#FFFFFF");
    label.name = "label";
    label.textAlign = "center";
    label.textBaseline = "middle";
    label.x = 150/2;
    label.y = 60/2;
    
    var button = new createjs.Container();
    button.name = "button";
    button.x = 20;
    button.y = 20;
    button.addChild(background, label);
    // setting mouseChildren to false will cause events to be dispatched directly from the button instead of its children.
    button.mouseChildren = false;
    
    stage.addChild(button, output);
    
    // set up listeners for all display objects, for both the non-capture (bubble / target) and capture phases:
    var targets = [stage,button,label,background];
    for (var i=0; i<targets.length; i++) {
        var target = targets[i];
        target.on("click", handleClick, null, false, null, false);
        target.on("click", handleClick, null, false, null, true);
        //target.addEventListener("click", handleClick, false);
        //target.addEventListener("click", handleClick, true);
    }
    
    stage.update();
}

function handleClick(evt) {
    if (evt.currentTarget == stage && evt.eventPhase == 1) {
        // this is the first dispatch in the event life cycle, clear the output.
        output.text = "target : eventPhase : currentTarget\n";
    }
    
    output.text += evt.target.name+" : "+evt.eventPhase+" :...