Forums » Help » Remove touch buttons, and the event listeners

I have the touch buttons plugin working fine for the first menu, but later into the game when I have a pause menu the events from the first menu still exists, and seem to take precedence over the new pause menu when the buttons are in the same location.

I tried adding a kill function by copying the init function and replacing addEventListener with removeEventListener, but had no success. Is there a way to close a button collection correctly so all the event listeners are removed?

init: function( buttons ) {
    this.buttons = buttons;

    document.addEventListener('touchstart', this.touchStart.bind(this), false);
    document.addEventListener('touchend', this.touchEnd.bind(this), false);

    // My added click events
    document.addEventListener('mousedown', this.touchStartMS.bind(this), false);
    document.addEventListener('mouseup', this.touchEndMS.bind(this), false);

    document.addEventListener('MSPointerDown', this.touchStartMS.bind(this), false);
    document.addEventListener('MSPointerUp', this.touchEndMS.bind(this), false);
    document.body.style.msTouchAction = 'none';
}

Why not use ig.input.state and forget setting and unsetting event listeners altogether?

Well I do use ig.input.state elsewhere, but that doesn't allow for listening to on screen buttons on iPhone, so the touch buttons plugin uses the above code to listen to screen touches and then triggers the ig.input.state.

Mind linking to the plugin you are using?

In any case, I have a feeling that setting and unsetting event listeners will not be the solution. Let either the engine, or the plugin handle that. Your job will likely be to catch such events and determine if they are relevant to the current entity/class.

Notice how you are setting event listeners on a specific entity? Instead of that, the listeners should be more general, so that any entity can tell when the event is firing.

Then in your entity update function, you would have logic like:

if(touchStartEvent && touchStartIsRelevant) {
    this.touchStart();
}
... // etc.

If, like you say, the plugin triggers the ig.input.state, couldn&039;t you just use that and forget about #touchstart, touchend, etc. altogether?

I'm using the Touch Buttons plugin, described in the integrating impact with ejecta page.

The code I posted before wasn't from an individual entity, it was a snippet of the plugin code where the listeners we're added, but not removed.

I've got it working now though, kind of how you suggested. Instead of creating a buttonCollection for each menu and trying to remove the listeners, I've altered the buttonCollection class to be used globally and added some methods to add/remove buttons as needed.

I've posted my altered copy of the plugin incase it's useful for anyone else
touchButton plugin with add/remove button methods

Glad you got that working!