Bootstrap Event Handling Causing Performance Issues in Phaser Game

[ivorcosta]

Environment

• Bootstrap version: 5.3.3
• Browser: Chrome (latest)
• Framework: Vue.js 3 with Phaser 3.87.0

Problem Description

I'm developing a game using Phaser 3 within a Vue.js application that uses Bootstrap 5 for UI components.
I've encountered a performance issue: whenever a user clicks to move a piece in the game, a Bootstrap click event is being triggered and processed, causing frame drops.

Using Chrome's performance profiler [screenshot], I can see that:

1. Every click on the game canvas triggers a Bootstrap event handler
2. These handlers take considerable time to process
3. The game logic is handled by Phaser, not Bootstrap
4. Removing bootstrap.min.js import increases frame rate

What I've Tried

I've attempted several approaches to prevent Bootstrap from handling events on the game container:

1. Stop event in Vue.js. Result: disable both bootstrap and phaser event handling:

// In mounted() method
this.$refs.gameContainer.addEventListener('click', this.stopEvent, true);
this.$refs.gameContainer.addEventListener('mousedown', this.stopEvent, true);
// Same for mouseup, touchstart, touchend, touchmove

stopEvent: function(event) {
    event.stopPropagation();
    event.preventDefault();
}

2. Selective event stop in Vue.js. Result: nothing changes:

stopEvent: function(event) {
    if (this.$refs.gameContainer && this.$refs.gameContainer.contains(event.target)) {
      const isBootstrapEvent = new Error().stack.includes('bootstrap');
      if (isBootstrapEvent) {
        event.stopPropagation();
        event.preventDefault();
      }
    }
}

3. Stop event in Phaser.js. Result: nothing changes:

this.input.on("pointerdown", this.stopEvent, this);
this.input.on("pointerup", this.stopEvent, this);

stopEvent(pointer) {
    const event = pointer.event;
    event.stopPropagation();
    event.preventDefault();
}

4. Using data-bs-no-jquery attribute. Result: nothing changes:

<div id="game-container" ref="gameContainer" data-bs-no-jquery="true"/>

5. CSS pointer-events modifications. Result: disable both bootstrap and phaser event handling:

.bootstrap-element {
  pointer-events: none;
}

#game-container {
  pointer-events: auto;
}

Unfortunately, these solutions either:

• Block all events (including those needed by Phaser)
• Don't effectively prevent Bootstrap from processing the events

Questions

1. Is there an official way to tell Bootstrap to ignore events on specific DOM elements or containers?

2. Is there a way to configure Bootstrap's event delegation system to exclude certain elements from event processing?

3. Are there any known conflicts between Bootstrap's event handling and canvas-based libraries like Phaser, and any recommended solutions?

Any guidance would be greatly appreciated. Thank you!

[julien-deramond]

As you said, you're likely seeing performance issues because Bootstrap's global event listeners (from bootstrap.min.js) are processing clicks on your Phaser canvas, even though they don't affect it.

Is there an official way to tell Bootstrap to ignore events on specific DOM elements?

I'm not the more knowledgeable in JS in the core team, but I don't think there's a Bootstrap API that allows opting-out elements from event delegation. Bootstrap doesn't "scope" its handlers.

Can Bootstrap's event delegation be configured to exclude certain elements?

I'd say not directly. You could only monkey-patch or override event handlers.

Are there known conflicts with Phaser?

Not known, but canvas-based libraries like Phaser surely don't expect global UI frameworks like Bootstrap to intercept events.

Here are other few things to try:

1. Remove Bootstrap JS (bootstrap.min.js): If you're only using Bootstrap for styling and not for modals, tooltips, etc., just using bootstrap.min.css would avoid the problem entirely.
2. Switch to a Vue implementation of Bootstrap such as https://github.com/bootstrap-vue-next/bootstrap-vue-next. It's an early implementation of Vue 3, Bootstrap 5 and Typescript that may handle differently the events.
3. Try to use stopImmediatePropagation() instead of stopPropagation() in the tests you mentioned.
4. Try to wrap the Phaser canvas in a Shadow DOM (e.g., inside a custom Web Component). This could maybe isolate event propagation completely, preventing Bootstrap (or anything else in the main DOM) from seeing the events. It may require more setup to integrate with Vue + Phaser.
5. If you don't find any technical workaround, switch to another Vue component library.

[ivorcosta]

Hi Julien, thanks for your thorough comment!

Your solution 3 solved the issue! Before/After screenshot

Another problem I encountered in my previous tests was that I was adding the stop listener after Bootstrap's event handling was initialized.
Here's the workaround solution - the code needs to be placed before the Bootstrap JS import:

document.addEventListener('click', (event) => {
    if(event.target.nodeName === 'CANVAS') {
        event.stopImmediatePropagation();
    }
}, true);

import('bootstrap/dist/js/bootstrap.min.js');

Although this worked for me, this workaround has some limitations:

It prevents all click events from propagating on all canvas elements, including Phaser and Google Tag Manager events. In my case, this didn't impact functionality much since I'm using mouseup and mousedown events in Phaser rather than click events.

It would be preferable if there were an official way to disable only Bootstrap events on specific DOM elements.