In order to block button presses, it’s possible to use event.stopPropagation in the mouse down or touch start events, but this doesn’t work when moving the scroll thumbnail ( EDIT: - when using touch ).
Touch can be tested in Chrome by turning on the phone icon as seen below…
Has anyone come up with a solution for this yet ( maybe by monkey-patching? )
Here’s a project showing the issue - when dragging the scroll area ( using mouse or touch ), the cube below in the 3D scene shouldn’t rotate.
Feel free to fork!
https://playcanvas.com/project/611766/overview/ui-scrollbar-blocker
It would be great if the UI elements had a toggle option to automatically capture their own events, and stop them being propegated to other elements.
Seems to work fine for me?
It’s with touch that it doesn’t seem to work ( tested in Chrome with the touch toggle, and on mobile ).
Also, the stopPropegation on the button below ( try click and drag on it ) works for the mouse, but not for touch.
One other thing - if you mouse click on the button and then drag outside of the button and release, the code for moving the box up does not gets fired. In Touch mode, clicking and then dragging outside the button ( besides moving the scene behind ) does fire the event.
Based on some feedback from @yaustar on Discord ( cheers dude! ), I edited the touchInput script with a bool to add a check for dragging, which makes it work but doesn’t fix the underlying problem with being able to stop propagation of UI events.
