我正在使用 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）之前它不起作用......我不知道为什么，但正如我所说，当我在谷歌浏览器上单击 F12 时，一切正常......为什么不之前？
编辑：当我在方法 onRenderedLineMouseEnter 中设置断点并且我在行断点上的 mouseenter 被捕获，然后它在没有 Inspector 的情况下工作。
我还在此方法中添加了一些 console.log，并且使用 Inspector 和不使用 Inspector 都会触发代码，但只有使用 Inspector（或使用断点）才会进行 UI 更改。
