CODEWITHSUNDEEP
createjs
Jens
Jens

Reputation: 13

How to prevent a shape behind a clicked shape to trigger in createjs

My very first question to stackoverflow, so please be kind.

I have two shapes on a createjs stage. The first one background covers the whole stage and has a listener on click defined. I want to put another shape on this one and this one should not trigger the click-listener defined on the background.

In the following example a click on the red circle triggers the listener of background.

var stage = new createjs.Stage('c');

var rect = new createjs.Shape();
rect.graphics.beginFill('#0000ff').drawRect(0, 0, 50, 50);

var background = new createjs.Shape();
background.graphics.beginFill('#000000').drawRect(0, 0, 500, 500);
background.alpha = 0.7;
background.on('click', function () {
  circle.visible = !circle.visible;
  stage.update();
});

var circle = new createjs.Shape();
circle.graphics.beginFill('#ff0000').drawCircle(225, 225, 50);

// circle.on('click', function () {});

stage.addChild(rect);
stage.addChild(background);
stage.addChild(circle);

stage.update();

https://codepen.io/anon/pen/rKmPOY

I found, that if I put an empty click listener on the circle, I have what I want, but this feels awkward.

What is the right approach here? This shouldn't be a bubbling issue since background and circle are siblings. Or am I getting this completly wrong?

Upvotes: 1

Views: 67

Answers (1)

Lanny
Lanny

Reputation: 11294

If something doesn't have a click listener, it will not be evaluated when the mouse is clicked. This is definitely a desired behaviour (it is much more annoying to have things you don't want blocking clicks).

Your workaround adding an empty listener is fine, and pretty typical.

The only other option I can think of is to check what is under the mouse on click, and filter it manually, which is way more work.

Cheers,

Upvotes: 0

Related Questions