仅当浏览器窗口处于非活动状态时，EventListener才起作用（不在顶部）

Question

我正在使用Two.js在Angular应用程序中绘制svg图像。

在two.js中绘制svg（其中包含一些元素）之后，我向其元素添加事件侦听器，如下所示：

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）时它才起作用...我不知道为什么，但是正如我所说的，当我在Google chrome上单击F12时，一切都在起作用...为什么以前没有呢？

编辑： 当我在onRenderedLineMouseEnter方法中设置断点时，我捕获了行断点上的mouseenter，然后它在没有Inspector的情况下正常工作。

我还向该方法添加了一些console.log，并且使用Inspector且不使用检查器都将触发代码，但仅使用检查器（或使用断点）才可以更改UI。

Answer 1

我观察到其他情况-当浏览器窗口处于非活动状态时，处理程序可以正常工作，但是当我单击浏览器窗口并处于活动状态时，则它无法正常工作。 这就是为什么我写有关检查器的原因-该工具导致检查器处于活动状态，浏览器内容处于非活动状态。