选择easyljs鼠标事件不起作用

Question

not sure what I'm doing wrong here but some select mouse events (drag/drop, onclick and onpress) do not work. onDoubleClick works however. This is what I'm doing.

.js file

            var b2Vec2 = Box2D.Common.Math.b2Vec2;
            var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
            var b2BodyDef = Box2D.Dynamics.b2BodyDef;
            var b2Body = Box2D.Dynamics.b2Body;
            var b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
            var b2Fixture = Box2D.Dynamics.b2Fixture;
            var b2World = Box2D.Dynamics.b2World;
            var b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
            var b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;
            var b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
            var b2AABB = Box2D.Collision.b2AABB;
            var b2ContactListener = Box2D.Dynamics.b2ContactListener;

            window.onblur = function(){ Ticker.setPaused(true); PAUSED = true; console.log("paused"); }
            window.onfocus = function(){ Ticker.setPaused(false); PAUSED = false; console.log("unpaused"); }

            var PAUSED = false;

            var Type = {
                WALL : 1,
                BOULDER : 2
            };

            var CategoryBits = {
                WALL : 0x0001,
                BOULDER : 0x0002
            };

            function Boundary(density, restitution, friction, angularDamping, linearDamping, position, size, scale, categoryBits, maskBits, type, world){
                var boundaryFixture = new b2FixtureDef;
                boundaryFixture.density = density;
                boundaryFixture.restitution = restitution;
                boundaryFixture.friction = friction;
                boundaryFixture.filter.categoryBits = categoryBits;
                boundaryFixture.filter.maskBits = maskBits;
                boundaryFixture.shape = new b2PolygonShape;
                boundaryFixture.shape.SetAsBox(size.length/scale, size.height/scale);
                var boundaryBodyDef = new b2BodyDef;
                boundaryBodyDef.type = b2Body.b2_staticBody;
                boundaryBodyDef.angularDamping =  angularDamping;
                boundaryBodyDef.linearDamping = linearDamping;
                boundaryBodyDef.position.x = position.x/ scale; 
                boundaryBodyDef.position.y = position.y/scale; 
                this.boundary = world.CreateBody(boundaryBodyDef);
                this.boundary.CreateFixture(boundaryFixture);
                this.boundary.SetUserData(this);
                this.type = type;
            };

            function Position(x, y){
                this.x = x;
                this.y = y;
            };

            function Size(length, height){
                this.length = length;
                this.height = height;
            };

            function Noir(size, scale, step, debug){
                this.GRAVITY = new b2Vec2(0, 10/(scale/5));
                this.FPS = 30;
                this.SCALE = scale; 
                this.STEP = step;
                this.TIMESTEP = 1/this.STEP;
                this.DEBUG = debug;
                this.LENGTH = size.length;
                this.LENGTH_OFFSET = 20;
                this.HEIGHT = size.height;
                this.HEIGHT_OFFSET = 10;
                this.BOUNDARY_WIDTH = 2;
                this.VELOCITY_ITERATIONS = 10;
                this.POSITION_ITERATIONS = 10;

                this.world;
                this.contactListener;
                this.canvas;
                this.debugCanvas;
                this.debugDraw;
                this.context;
                this.debugContext;
                this.stage;
                this.previousTime = Date.now();
                this.game;
            };

            Noir.prototype.initCanvas = function(){
                this.canvas = document.getElementById('canvas');
                this.context = canvas.getContext('2d');
                this.stage = new Stage(canvas);
                this.stage.snapPixelsEnabled = true;
                this.stage.mouseEventsEnabled = true;
                //this.stage.onDoubleClick = function(event){ console.log("moving.."); }

                this.stage.enableMouseOver();
                if(this.DEBUG){
                    this.debugCanvas = document.getElementById('debugCanvas');
                    this.debugContext = debugCanvas.getContext('2d');
                    console.log('Debug on');
                } 
            };

            Noir.prototype.initDebug = function(){
                this.debugDraw = new b2DebugDraw();
                this.debugDraw.SetSprite(this.debugContext);
                this.debugDraw.SetDrawScale(this.SCALE);
                this.debugDraw.SetFillAlpha(0.7);
                this.debugDraw.SetLineThickness(1.0);
                this.debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
                this.world.SetDebugDraw(this.debugDraw);
            };

            Noir.prototype.setContactListener = function(){
                this.contactListener = new b2ContactListener;
                this.contactListener.events = this;
                this.contactListener.BeginContact = function(contact, manifold){
                    var bodyAUser = contact.GetFixtureA().GetBody().GetUserData();
                    var bodyBUser = contact.GetFixtureB().GetBody().GetUserData();
                    /* console.log(bodyAUser.type + " , " + bodyBUser.type); */
                    if((bodyAUser.type == Type.BOULDER) && (bodyBUser.type == Type.WALL)){ this.events.boulderWallContact(bodyAUser, bodyBUser); }
                    else if((bodyAUser.type == Type.WALL) && (bodyBUser.type == Type.BOULDER)){ this.events.boulderWallContact(bodyBUser, bodyAUser); }
                }
                this.world.SetContactListener(this.contactListener);
            };

            Noir.prototype.boulderWallContact = function(boulder, wall){ boulder.flagToDestroy(); };

            Noir.prototype.initPhysics = function(){
                this.lastTimestamp = Date.now();
                this.world = new b2World(this.GRAVITY, true);
                this.setContactListener();
                if(this.DEBUG){ this.initDebug(); console.log('Debug initialized'); } 
                var floor = new Boundary(1, 1, 0.6, 0.6, 0.6, new Position(-(this.LENGTH_OFFSET/2), (this.HEIGHT+ (this.HEIGHT_OFFSET - (this.HEIGHT_OFFSET - 1)))), 
                        new Size((this.LENGTH + this.LENGTH_OFFSET), this.BOUNDARY_WIDTH), this.SCALE, CategoryBits.WALL, CategoryBits.BOULDER, Type.WALL, this.world);
                /* var ceiling = new Boundary(1, 1, 0.6, 0.6, 0.6, new Position(-(this.LENGTH_OFFSET/2), (this.HEIGHT_OFFSET - (this.HEIGHT_OFFSET - 1))), 
                        new Size((this.LENGTH + this.LENGTH_OFFSET), this.BOUNDARY_WIDTH), this.SCALE, CategoryBits.WALL, CategoryBits.BOULDER, Type.WALL, this.world); */
                var leftFixture = new Boundary(1,1, 0.6, 0.6, 0.6, new Position(-(this.BOUNDARY_WIDTH - (this.BOUNDARY_WIDTH - 1)), -(this.LENGTH_OFFSET/2)),
                    new Size(this.BOUNDARY_WIDTH, (this.HEIGHT + this.HEIGHT_OFFSET)), this. SCALE, CategoryBits.WALL, CategoryBits.BOULDER, Type.WALL, this.world);
                var rightFixture = new Boundary(1,1, 0.6, 0.6, 0.6, new Position((this.LENGTH + (this.LENGTH_OFFSET - (this.LENGTH_OFFSET - 1))),  -(this.LENGTH_OFFSET/2)),
                    new Size(this.BOUNDARY_WIDTH,  (this.HEIGHT+ this.HEIGHT_OFFSET)), this.SCALE, CategoryBits.WALL, CategoryBits.BOULDER, Type.WALL, this.world);
            };

            Noir.prototype.tick = function(){
                this.updatePhysics();
                this.stage.update();
            };

            Noir.prototype.initTicker = function(){
                Ticker.setFPS(this.FPS);
                Ticker.useRAF = true;
                Ticker.addListener(this, true);
            };

            Noir.prototype.init = function(){
                this.initCanvas();
                this.initTicker();
                this.initPhysics();
                this.initGame(this.stage, this.world);
                var debug = document.getElementById('debug');
            };

            Noir.prototype.initOnLoadDocument = function(){
                console.log('running');
                if(document.loaded){ this.init(); }
                else{
                    if(window.addEventListener){ window.addEventListener('load', this.init(), false); }
                    else { window.attachEvent('onLoad', this.init); }
                }
            }

            Noir.prototype.updatePhysics = function(){
                    /* remove flagged objects for destruction */
                    /* update non-flagged objects */
                    if(!PAUSED){
                        this.updateGame();
                        this.world.Step(this.TIMESTEP, this.VELOCITY_ITERATIONS, this.POSITION_ITERATIONS);
                    this.world.ClearForces();
                    if(this.DEBUG){
                        this.world.m_debugDraw.m_sprite.graphics.clear();
                        this.world.DrawDebugData();
                    }
                }
            };

            Noir.prototype.initGame = function(){
                this.game = new Game(this.stage, this.SCALE, this.world);
                this.game.start();
            };

            Noir.prototype.updateGame = function(){ this.game.update(); }


            function Actor(density, restitution, friction, angularDamping, linearDamping, path, position, size, stage, scale, categoryBits, maskBits, type, world){
                this.skin = new Bitmap(path);
                this.skin.x = position.x;
                this.skin.y = position.y;
                this.skin.regX = (size.length/2);
                this.skin.regY = (size.height/2); 
                this.skin.snapToPixel = true;
                this.skin.mouseEnabled = false;
                stage.addChild(this.skin);

                var actorFixture = new b2FixtureDef;
                actorFixture.density = density;
                actorFixture.restitution = restitution;
                actorFixture.friction = friction;
                actorFixture.filter.categoryBits = categoryBits;
                actorFixture.filter.maskBits = maskBits;
                actorFixture.shape = new b2PolygonShape;
                actorFixture.shape.SetAsBox((size.length/2)/scale, (size.height/2)/scale);
                var actorBodyDef = new b2BodyDef;
                actorBodyDef.type = b2Body.b2_dynamicBody;
                actorBodyDef.angularDamping = angularDamping;
                actorBodyDef.linearDamping = linearDamping;
                actorBodyDef.position.x = this.skin.x/scale;
                actorBodyDef.position.y = this.skin.y/scale;
                this.body = world.CreateBody(actorBodyDef);
                this.body.CreateFixture(actorFixture);
                this.body.SetUserData(this);
                this.type = type;
                this.destroy = false;
            };

            Actor.prototype.flagToDestroy = function(){ this.destroy = true; };

            Actor.prototype.remove = function(game){
                game.stage.removeChild(this.skin);
                game.world.DestroyBody(this.body);
                game.actors.splice(game.actors.indexOf(this),1);
            };

            Actor.prototype.update = function(scale){  
                this.skin.rotation = this.body.GetAngle() * (180/Math.PI);
                this.skin.x = this.body.GetWorldCenter().x * scale;
                this.skin.y = this.body.GetWorldCenter().y * scale;
            };

            function Icon(path, position, size, stage){
                this.skin = new Bitmap(path);
                this.skin.x = position.x;
                this.skin.y = position.y;
                this.skin.regX = (size.length/2);
                this.skin.regY = (size.height/2); 
                stage.addChild(this.skin);
                //this.skin.onDoubleClick = function(event){ alert("click click"); }
                this.skin.onClick = function(event){ alert("click"); }
                this.skin.onPress = function(event){ console.log("pressing"); }
            };

            function Game(stage, scale, world){ 
                this.scale = scale;
                this.stage = stage;
                this.world = world;
                this.boulderSpawnDelayCounter = 0;
                this.actors = [];
                this.icon;
            };

            Game.prototype.start = function(){
                var  position = new Position(400, 200);
                var size = new Size(50, 50);
                console.log(this);
                this.icon = new Icon("images/bird.png", position, size, this.stage);
            };

            Game.prototype.controlledSpawn = function(stage, scale, world){
                var spawnInterval = (50 + Math.round(Math.random() * 10));
                this.boulderSpawnDelayCounter++;
                if(this.boulderSpawnDelayCounter % spawnInterval === 0){  
                    this.boulderSpawnDelayCounter = 0;
                    this.boulderSpawn();
                }
            };

            Game.prototype.boulderSpawn = function(stage, scale, world){
                var  position = new Position((100 + Math.round(Math.random() * 250)), -20);
                var size = new Size(50, 50);
                this.actors.push(new Actor(0.2, 0.6, 0.3, 0.3, 0.3, "images/bird.png", position, size, this.stage, this.scale, CategoryBits.BOULDER, CategoryBits.WALL, Type.BOULDER, this.world));
            };

            Game.prototype.update = function(){ 
                this.controlledSpawn();
                for(idx = 0; idx < this.actors.length; ++idx){
                 if(this.actors[idx].destroy == true){ this.actors[idx].remove(this); }}
                for(idx = 0; idx < this.actors.length; ++idx){ this.actors[idx].update(this.scale); }
            };

.html file

            <!doctype html>
                <html xmlns:og="http://ogp.me/ns#">
                    <head>
                        <meta charset="utf-8">
                        <title>Noir test</title>
                        <link href="css/style.css" rel="stylesheet" type="text/css" />
                    </head>
                    <body>
                        <canvas width="500" height="500" id="canvas"></canvas>
                        <canvas width="500" height="500" id="debugCanvas"></canvas>
                        <script> var createjs = window </script>
                        <script type="text/javascript" src="libs/easeljs-0.5.0.min.js"></script>
                        <script type="text/javascript" src="libs/Box2dWeb-2.1.a.3.min.js"></script>
                        <script type="text/javascript" src="js/noir.js"></script>
                        <script> var noir = new Noir(new Size(500, 500), 30, 20, false);  noir.initOnLoadDocument()</script>
                    </body>
                </html>

I'm working with this on a local server so the server security issue triggering this similar behaviour for remote servers doesn't apply (I think). Guys, I'm stumped here. Your help will be very much appreciated. Thanks.

Answer 1

Without seeing your CSS, I would guess that your debug canvas is layered overtop of your main canvas. If this is the case, the debug canvas will be the target for any mouse events, preventing your main canvas (and the related Stage) from receiving them.

Due to a bug (recently fixed in the NEXT version), EaselJS subscribes to double click events on the window, instead of on the canvas, which is likely why onDoubleClick is working for you.

Also, it might be worth checking out the newer version of EaselJS. v0.7.0 includes a great new event model, and v0.7.1 will be out shortly with the fix for double click.