Detect click on UI elements

Hi, I would like to find out if I am able to detect clicking on UI elements, so camera rotation will not occur when clicking on buttons for example.

Hi @Lukas_Zahumensky,

One way that I approach that is by using a global state variable in my UI button script. For example:

var ButtonLogic = pc.createScript('buttonLogic');

ButtonLogic.hasFocus = false;

// initialize code called once per entity
ButtonLogic.prototype.initialize = function() {
    this.entity.button.on('mouseenter', () => ButtonLogic.hasFocus = true);
    this.entity.button.on('mouseleave', () => ButtonLogic.hasFocus = false);

Now in your camera input script you can check on top if any button has input like this, and if it’s true cancel/bypass any input:

if(ButtonLogic.hasFocus) return;

// --- camera input

Thank you Leonidas! That should work. :slight_smile:
May I ask if there is also a way to achieve this by determining if click was on element that is in UI layer?

I agree that may be useful to have as an API (if it’s possible) though right now there isn’t anything available like this in the engine.

You can try and submit a feature request in the engine repo.

ok Thank you very much ! :slightly_smiling_face:

1 Like