How to stop the event bubble in easljs?

Question

I have a mousedown event listener on stage and a mousedown event listener on a shape.when I click on the shape, the mousedown event listener on stage will also fire? How to solve this?

var stage = new createjs.Stage("test");
stage.addEventListener('stagemousedown',mouseDown);
var shape = new createjs.Shape();
shape.graphics.beginStroke("#000").setStrokeStyle(8,"round").drawRect(0, 0, 100, 100);
shape.addEventListener('mousedown',smouseDown);
stage.addChild(shape);

Answer 1

The stagemousedown event is a special event to always capture stage mouse interaction, regardless of what is clicked. If you would like to ONLY receive that event when a child on the stage is not clicked there are other approaches.

One suggestion would be to add a stage-level child that is the size of the stage, and listen for mouse events on it. You can then check the target to see what was clicked (or not clicked)

var stage = new createjs.Stage("canvas");

var bg = new createjs.Shape();
bg.graphics.f("#ddd").dr(0,0,550,400);

var shape = new createjs.Shape().set({x:200,y:200});
shape.graphics.f("#f00").dc(0,0,100);

stage.addChild(bg, shape);
stage.update();

stage.addEventListener("mousedown", function(event){
    if (event.target == bg) {
        console.log("Missed Content");
    } else {
        console.log("Hit Content");
    }
});

Answer 2

this is one of the ways to remove the shape object in the stage.

stage.removeChild(shape);

you can put that in a function and just call it when you want to remove the object.

please let me know if that is what you need.

Answer 3

There is maybe a better way, but you could check if there is no object under the mouse when you catch the "stagemousedown" event :

function mouseDown(event) {
    if (stage.getObjectUnderPoint(event.stageX,event.stageY) == null) {
        // ...
    }
}

Answer 4

I think what you're looking for is stage.mouseEnabled = false:

Indicates whether to include this object when running mouse interactions. Setting this to false for children of a Container will cause events on the Container to not fire when that child is clicked. Setting this property to false does not prevent the getObjectsUnderPoint method from returning the child.

However, from the docs:

Note: In EaselJS 0.7.0, the mouseEnabled property will not work properly with nested Containers. Please check out the latest NEXT version in GitHub for an updated version with this issue resolved. The fix will be provided in the next release of EaselJS.