Отключение делегирования событий Bootstrap для конкретных элементов DOM ⇐ Javascript

[Anonymous]

среда < /h3>

• Версия Bootstrap: 5.3.3 < /li>
  Браузер: Chrome (последний) < /li>
  Структура: vue.js 3 с Phaser 3.87.0 < /li>
  < /ul>
  Задача 3.87.0 < /li>
  < /ul>
  wring wress 3,87. Игра, использующая Phaser 3 в приложении vue.js, в которой используется Bootstrap 5 для компонентов пользовательского интерфейса.
  Я сталкивался с проблемой производительности: всякий раз, когда пользователь нажимает, чтобы переместить пьесу в игре, событие Bootstrap Click и обработан, вызывая кадр. />
  • Каждый клик на игре Canvas запускает обработчик событий Bootstrap < /li>
    Эти обработчики требуют значительного времени для обработки < /li>
    Логика игры обрабатывается Phaser, а не Bootstrap < /li>
    removing bootshin. /> < /ol>
    Что я попробовал < /h3>
    Я попытался сделать несколько подходов, чтобы предотвратить обработку событий в контейнере игры: < /p>
    
    in vue.js. Результат: отключить обработку как начальной загрузки, так и фазера :

  Код: Выделить всё

  // 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();
  }
  
  < /code>
  [list]
  [*] [b] Селективная остановка события в vue.js. Результат: ничего не меняется [/b]:
  [/list]
  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();
  }
  }
  }
  < /code>
  [list]
  [*] [b] stop Event в phaser.js. Результат: ничего не меняется [/b]:
  [/list]
  this.input.on("pointerdown", this.stopEvent, this);
  this.input.on("pointerup", this.stopEvent, this);
  
  stopEvent(pointer) {
  const event = pointer.event;
  event.stopPropagation();
  event.preventDefault();
  }
  < /code>
  [list]
  [*] [b] Использование атрибута Data-BS-no-jquery. Результат: ничего не меняется [/b]:
  [/list]
  
  < /code>
  [list]
  [*] [b] модификации CSS Pointer-Events. Результат: отключить обработку как начальной загрузки и фазера [/b]:
  [/list]
  .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

Is there an Официальный способ сказать Bootstrap игнорировать события в конкретных элементах DOM или контейнерах? и любые рекомендуемые решения? Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/796 ... m-elements