如何在画布下使用 HTML 元素答案

【问题标题】：How to work with HTML elements underneath a canvas如何在画布下使用 HTML 元素
【发布时间】：2010-11-10 06:29:50
【问题描述】：

我有一个包含一些 HTML div 和一些 CSS 的容器，如果我将鼠标悬停在它们上面，背景颜色会发生变化。我想在容器顶部覆盖一个画布，以便我可以画线。问题是当画布被覆盖时，div 的悬停变化不再起作用。有没有办法覆盖画布，但仍然有 CSS 或 JavaScript onmouseover 事件仍然在下面的元素上工作？

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

所以你想要一个透明的画布，它把除了点击之外的所有鼠标事件都传递给它后面的元素？

恕我直言，您需要为此使用 JS：捕获画布上的所有事件，然后手动将它们传递到画布后面的 div。如果您有多个 div，则需要根据鼠标的 (x,y) 坐标进行某种查找。

【讨论】：

【解决方案2】：

解决所有这些麻烦的另一种方法是使用 pointer-events CSS 属性。 Mozilla,Webkit 和 IE6-8(excanvas) 都支持这个。 Opera 没有，但我真的不在乎。

<canvas style="pointer-events:none;"></canvas>

【讨论】：