PointerLock vs 2D Element click

Help & Support
1

In this scene I have a script firstPersonMovement.js that enables pointer lock whenever the mouse is clicked. Also I have some text 2D text elements with input enabled and a script uiInput.js that listens for the click event and opens a new browser tab.

When the pointer lock is disabled , either before it is enabled, or if the user taps escape key to exit pointer lock mode, I want to be able to click the 2D Text elements.

However the click on the 2D text elements, most of the time, causes the pointer lock to be enabled again.

I want the 2D text element click handler to get in first before the firstPersonMovement mousedown handler, but I’m not sure how to do it.

https://playcanvas.com/project/767123/overview/pointerlock-vs-2d-element-click

2

UI events are handled first so you can stop the propagation in the UI event https://developer.playcanvas.com/en/api/pc.ElementMouseEvent.html#stopPropagation

3

In my project the UI event is not handled first most of the time. After several attempts of trying to click the text in various places the element mouse event “click” handler will be called.

4

Hmm… Does the same happen when you use an image element?

5

I’ve not tried that yet. One thing I have noticed is that after hitting escape key to exit pointer lock, if I quickly click the text element then the handler is called eg 0.5 second. If I wait 1 second then the click handler isn’t called.

6

OK got it. In my firstPersonMovement script I had

app.mouse.on("mousedown", enablePointerLock, this);

Whereas in my UI element script I had click rather than mousedown

this.entity.element.on('click', clickHandler, this);

When I change to mousedown then clickHandler is always called as expected.

this.entity.element.on('mousedown', clickHandler, this);

2 Likes
7

Ah, of course. My bad. I forgot click registers on the mouse up event :man_facepalming: