Javascript，Pannellum：叠加图像捕获鼠标/触摸事件

Question

我使用Pannellum构建了一个全景图并在其上方放置了一个图像。现在问题是鼠标和触摸事件被应用于图像并且没有到达全景查看器以便控制它。我可以想象一个解决方案，首先放置一个透明的全景，以便鼠标事件控制它。然后将真正的全景置于所有位置之下，并将动作镜像到它上面。有更好的解决方案吗？我已经阅读了关于事件冒泡的内容，但还没有理解它。

Answer 1

您可以使用css选项禁用与图片的互动

pointer-events: none;

只需将其添加到图像的样式标签中即可。

在div中使用画布的示例：

HTML

<div id="crosshairCont"><canvas id="crosshair" height="450px" width="800px"></canvas></div> 

CSS

#crosshairCont{
 z-index: 2;
 position: absolute;
 pointer-events: none;
}