CODEWITHSUNDEEP
createjseaseljs
user3494748
user3494748

Reputation: 15

How to click through elements?

I have two shape at same position, not same color, and when i click over them, i want to fire click event on both, not just the first.

These two shapes are in the same container.

I have tried getObjectsUnderPoint() under stage.on("mousemove"), but this function increase my FPS (60 to 32~, and inside there are just a console.log), So it's not a good solution.

I tried the bubble, the useCapture, but i think it isn't what i want.

I just want to fire click on all element behind my mouse.

If someone have a solution, please.

Upvotes: 1

Views: 224

Answers (1)

Lanny
Lanny

Reputation: 11294

There are a few points here:

EaselJS objects sort of work like HTML DOM Elements. If an element has a mouse handler on it it will block objects in other hierarchies below it from receiving the event. This is just how it works. The main difference is that if you don't have mouse events, then they are just ignored (like if you set the pointerEvents on an HTML element to none to have the mouse ignore it).

Your idea with getObjectsUnderPoint is what I would have recommended. Running any hit-test logic on mousemove is going to be expensive (mousemove fires a LOT, which is why we give the ability to throttle the typical mouseover check if you enableMouseOver on the stage).

A few things to optimize it:

  1. Ensure you are using mode=2 on your getObjectsUnderPoint, which will only check objects with mouse listeners. This greatly reduces the overhead in checking. [docs]

  2. Instead of checking the stage on your own mousemove event, set a flag to check it on tick. This throttles it to your Ticker FPS at least. You could also set an interval to check it even less often. It can create a little bit of a visible lag, but you can probably find a nice balance.

  3. Reduce what is checked. If you have a container with your clickable elements in it, you can only check that object for mouse interaction.

If your objects are the exact same, you can also just trigger the click manually on the second item.

obj1.on("click", function(event) {
  obj2.dispatchEvent(event);
});

I hope those approaches provide you a solution. Let me know if you have follow-up questions.

Cheers,

Upvotes: 0

Related Questions