Question

我有一个使用Canvas或SVG API绘制线条/形状的用例。这些图形将绘制在一组控件之上的图层上。我现在遇到的问题是，一旦将Canvas置于控件之上，我就无法访问控件，例如单击复选框/按钮等。如何启用此功能？

例如

<div>
   <div id="layer1" style="position:absolute;top:0px;left:10px">
         <input type="submit"/>
    </div>
    <canvas id="layer2" style="position:absolute;top:0px;left:10px"></canvas>
</div>

在上面的示例中，我无法单击“提交”按钮，因为顶部的图层，我想要做的是在按钮周围绘制圆圈，同时我应该可以点击按钮也是。

HTML中是否可以这样做？

Answer 1

通常，您无法点击“浏览”HTML元素，但您仍有很多选项。

一个非常快速的解决方案是在画布的样式代码中使用pointer-events: none;。

这适用于Firefox / chrome / safari，但不适用于IE。

对于IE，你必须变得更聪明。

...但是为什么不把按钮放在上面而不是将画布放在上面？快速执行此操作的方法是以其样式提供画布z-index: -1;。

所以现在一起：

<div>
   <div id="layer1" style="position:absolute;top:0px;left:10px">
         <input type="submit"/>
    </div>
    <canvas id="layer2" style="position:absolute;top:0px;left:10px; border: 1px solid black; pointer-events: none; z-index: -1;"></canvas>
</div>

我想绘制一个Canvas，它位于另一个控件之上，并且能够访问控件，这可能是HTML吗？

1 个答案: