Блог

Главная - Вопросы по программированию - EventListener работает только тогда, когда окно браузера неактивно (не вверху)

EventListener работает только тогда, когда окно браузера неактивно (не вверху)

#javascript #typescript #event-listener #two.js

#javascript #typescript #прослушиватель событий #two.js

Вопрос:

Я использую Two.js для рисования svg-изображения в приложении Angular.

после рисования svg (в котором есть некоторые элементы внутри) в two.js Я добавляю прослушиватель событий к его элементам следующим образом:

 this.courtRenderer.update(); //after this command two.js draw the svg

for (const trajectory of this.trajectories) {
  trajectory.renderedLine._renderer.elem.addEventListener('mouseenter', (event) => {
    this.onRenderedLineMouseEnter(event, this.trajectories.filter((selectedTrajectory) =>
    selectedTrajectory.renderedLine.id === trajectory.renderedLine.id));
  }, false);
  trajectory.renderedLine._renderer.elem.addEventListener('mouseleave', () => {
    this.onRenderedLineMouseLeave(this.trajectories.filter((selectedTrajectory) =>
    selectedTrajectory.renderedLine.id === trajectory.renderedLine.id));
  }, false);
}

Тогда у меня есть обработчик для этого, который изменяет ширину строки и цвет строки, а также отправляет информацию в службу, чтобы открыть всплывающее окно в положении мыши.

     private onRenderedLineMouseEnter(event, trajectories){
    let renderedLine;
    for (const trajectory of trajectories){
      renderedLine = trajectory.renderedLine;
      renderedLine.linewidth = renderedLine.linewidth * this.appConfig.courtRenderer.highlightedTrajectoryWeight;
      renderedLine.stroke = this.appConfig.courtRenderer.colors.highlightedTrajectory;
    }
      this.courtRenderer.update();
      const popupPosition = new PopupPosition(renderedLine.id, event.layerX, event.layerY);
      this.virtualCourtService.selectShot(popupPosition);
    }

Он не работает, пока я не запущу консоль (F12) в браузере… Я не знаю почему, но, как я уже сказал, когда я нажимаю F12 в Google Chrome, все работает… Почему не раньше?

Редактировать: когда я устанавливаю точку останова в методе onRenderedLineMouseEnter и наведу курсор мыши на точку останова строки, она фиксируется, а затем она работает без инспектора.

Я также добавил некоторую консоль.войдите в этот метод, и либо с инспектором, либо без инспектора запускается код, но только с инспектором (или с точкой останова) изменения пользовательского интерфейса вносятся.

Комментарии:

1. В зависимости от настройки инспектора кэш браузера отключается при открытии инспектора; вероятно, ваша проблема связана с кэшем браузера.

2. Такая ситуация происходит во всех браузерах (Brave, Chrome, Firefox, Edge) и даже на других компьютерах.

3. Что происходит, если вы запускаете код после тайм-аута, может быть, ваш код запускается в ближайшее время?

4. то же самое. Я установил тайм-аут на 5 секунд, и он работает таким же образом. Код запускается в нужное время, и доказательством этого может быть то, что все журналы запускаются, когда я перемещаю мышь по траектории. Проблема в том, что пользовательский интерфейс не обновляется.

Ответ №1:

Я заметил кое-что еще — когда окно браузера неактивно, обработчики работают правильно, но когда я нажимаю на окно браузера, и оно активно, тогда оно не работает. Вот почему я написал об инспекторе — этот инструмент привел к тому, что инспектор является активным окном, а содержимое браузера неактивно. введите описание изображения здесь