Javascript，Pannellum：覆盖图像捕获鼠标/触摸事件答案

【问题标题】：Javascript, Pannellum: Overlay image captures mouse/touch eventsJavascript，Pannellum：覆盖图像捕获鼠标/触摸事件
【发布时间】：2016-11-10 21:57:05
【问题描述】：

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

【问题讨论】：

这个问题中没有任何东西可以解决。请阅读How to Ask 并提供minimal reproducible example。
很遗憾我的问题有点复杂，无法压缩成几行代码。我的问题是：有没有一种解决方案可以在面板查看器上方放置叠加图像，并且仍然能够通过拖动鼠标来控制图像。问题是在这种情况下，鼠标事件被图像捕获，并没有到达查看器。
然后放入几行以上的代码。您的问题没有多少视图，没有 cmets 也没有投票，因为没有没有什么可处理的。在大多数人愿意付出任何努力来帮助您之前，您需要自己做出明显的尝试来回答这个问题。

标签： javascript mouseevent pannellum

【解决方案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;
}

【讨论】：