Click Blocking on CSS Buttons

Help & Support
1

I have a button which has a click event listener. When I clcik on the button I want something to happen:

this.my_button.addEventListener('click', function(evt) {//do stuff})

but i dont want the 3d world underneath the button to react to the click.

WIthout manually writing logic for each button and specific case is there a way to block the clicks?

I tried using evt.stopPropagation() but that just seems to close the browser window.

Thanks

2

Hi @Grimmy!

As far as I know this doesn’t work for the click event.

Maybe you can try to add something like below to the initialize function as well.

this.my_button.addEventListener('mousedown', function(event) { event.stopPropagation(); }, this);
this.my_button.addEventListener('touchstart', function(event) { event.stopPropagation(); }, this);
3

Another alternative that I have used in a previous project it so just fire an event whenever a piece of UI is hovered over:

// Attached to UI Element
...
this.entity.element.on('mouseenter', function() {
        this.app.fire('uiHover');
    }, this);

    this.entity.element.on('mouseleave', function() {
        this.app.fire('uiUnHover');
    }, this);
...

//Attached to Raycast Monitor
...
    this.app.on('uiHover', this.uiBlock, this);
    this.app.on('uiUnHover', this.uiUnBlock, this);
...

Raycast.prototype.uiBlock = function() {
    this.blocked = true;
};

Raycast.prototype.uiUnBlock = function() {
    this.blocked = false;
};

Raycast.prototype.doRaycast = function (screenX, screenY) {

    var from = this.entity.getPosition();
    var to = this.entity.camera.screenToWorld(screenX, screenY, this.entity.camera.farClip);
    var result = this.app.systems.rigidbody.raycastFirst(from, to);

    if (result && !this.blocked) {

        //Do stuff...
    }    
    
    else {
        
    }
};

This way we just don’t do raycasts at all unless we know the mouse is not over a piece of UI.

I hope this is helpful.

Quick edit: I just realized you were talking about CSS buttons. You could take the same approach with those by firing the events to the app when the mouse is over the buttons, but I realize the pseudo-code isn’t exactly what you’re looking for. Hopefully it may help others.