How to check if a touch down or mouse down is over UI first?

🌵 Needle Engine
1

For example, I have a script which is a 3d carousel that can be span by onMouseDown and onMouseMove events tied together, and also onTouchStart and onTouchMove. I want to know if the user has clicked on some UI first before deciding what to do with those events - ie. not rotate the carousel if they click a button or drag something else like UI

Original Post on Discord

by user 103054507105067008

2

The EventSystem has a property “hasActiveUI” that you should be able to use. You can also take a look at OrbitControls ca. ~line 185 for how it checks that

3

Sorry for the delay in responding here!

4

How to use is EventSystem.hasActiveUI?

I try do use it in a Pointer Event.
this.context.input.addEventListener(InputEvents.PointerDown, this.inputPointerDown);

But hasActiveUI is always false when i click on my ui.

Then i tried to use it like in OrbitControls.ts.

With the AfterHandleInputEvent. But i can not import AfterHandleInputEvent into my own script. The compiler said it can not access it.

Anyway what is “BeforeHandleInput and AfterHandleInput” i can not find anything about it.

5

Hi,

you can subscribe to the onPointerDown in a later queue to make sure the EventSystem events are processed. By default queue is 0. The higher the number the later it will be invoked (or the smaller the earlier e.g. -1 if you want your event callback to be invoked before all core methods)

    awake() {
        this.context.input.addEventListener("pointerdown", evt => {

            console.log("DOWN", evt.intersections, EventSystem.instance?.hasActiveUI);

        }, { queue: 1 });
    }

I also found a bug where text elements were not properly catched and did prevent hasActiveUI to be set to true. This will be fixed in the next version.

6

Thanks.
It works for me in my local export. But not in a standalone build.

7

Hi, for me it works both in the local server as well as in builds, I’ve just checked again and made a deployment (see the button in the upper center and click on UI and non UI elements, it’s using the exact same code i shared above)

There’s no difference on our end in both scenarios. Can you double check you’re using the latest version?