如何解决仅当浏览器窗口处于非活动状态时,EventListener才起作用不在顶部
我正在使用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。
解决方法
我观察到其他情况-当浏览器窗口处于非活动状态时,处理程序可以正常工作,但是当我单击浏览器窗口并处于活动状态时,则它无法正常工作。 这就是为什么我写有关检查器的原因-该工具导致检查器处于活动状态,浏览器内容处于非活动状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。