I have the following situation. I have a game with multiple elements that can be clicked. They also trigger a mouse pointer. The game also includes a button, which will trigger a menu. This menu will be visible “on top” of the current scene, and this menu will make most of the game scene with the clickable elements invisible (the menu does not take the full width and height)
However, when I display this menu, the elements that are below this menu are still clickable. So the mouse still changes to a pointer when I move the mouse around the menu and “accidentally” hover over one of the clickable elements (which are no longer visible at this point). I can also click these elements, even when the menu is on top of these elements.
Is there a quick way to “remove” the click-event and the mouse-pointer event from these elements when the menu is displayed? I now create an array with all the elements which have a click-event. When I display the menu, I loop over the array and call disableInteractive() on the elements. After the menu is closed, I loop over the array again and call enableInteractive({cursor: 'pointer'}) on all the elements.
Is there a better way to do this, or is this the preferred way?
I was looking for something similar to this too. I know we can stop propagation on items clicked - but with two things layered on top of each other how do you prevent layers underneath being clickable without having to resort to altering each game object.
Yes, a menu scene can do the job too, it depend if the menu modify a lot the current scene, cause you need to use event emitters to share data between the 2 scenes.
Thanks for all the replies. setInteractive on the menu won’t help, this wont remove the interactivity on the other elements.
I will look into topOnly, thanks for that suggestion. A different menu scene is not an option for me, I want to display the menu in the current scene with some nice effects.
