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);

score 4 · Accepted Answer · answered Oct 10 '13 at 15:26

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");
    }
});

score 0 · Answer 2 · answered Oct 10 '13 at 06:53

0

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.

answered Oct 10 '13 at 06:53

Mox

19
4

It seems that you didn't understand what I mean. – Tom Oct 10 '13 at 09:34

score 0 · Answer 3 · answered Oct 10 '13 at 07:39

0

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) {
        // ...
    }
}

answered Oct 10 '13 at 07:39

Mister D.

661
5
9

This idea seems good.But mousedown on a hitArea also get "stage.getObjectUnderPoint(e.stageX,e.stageY) == null". – Tom Oct 10 '13 at 09:31
I tried here : http://jsfiddle.net/f6TzD/7/. I set a hitArea bigger than my object catching the mouse event. And it seems that the object is still recognized wherever I click on the hitArea. – Mister D. Oct 10 '13 at 13:31
I found the problem.When you use the latest createjs or easeljs it won't work correctly.But when you use the createjs in jsfiddle , it works well. – Tom Oct 11 '13 at 00:58
Then I may have a tricky solution. To all the objects which are not added to the stage you could add the "mouseover" and "mouseout" event listeners where you set a boolean to true/false. Then the condition in your mouseDown function would be "stage.getObjectUnderPoint(e.stageX,e.stageY) == null && !yourBool" – Mister D. Oct 11 '13 at 09:30

score 0 · Answer 4 · answered Dec 17 '13 at 16:41

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.

How to stop the event bubble in easljs?

4 Answers4

Linked