如何使HTML画布不可聚焦/不可选择

Question

我在制作几个不可聚焦/不可选择的HTML画布时遇到了一些麻烦 - 至少我认为必须调用它。

我正在做一个实际上可以选择几个画布的网站，但这是通过选中每个画布右侧的按钮来完成的。每个画布在WebGl中渲染一个3D模型，可以用鼠标旋转（使用Babylon.js完成）。但是，每当我在画布中旋转模型时，画布本身都会被“选中”而不应该被选中。这是非常误导的，因为整个网站都是关于选择画布。

这是在将3D模型旋转到画布内之前的样子：

这是旋转3D模型后的样子，或者只是单击/右键单击它：qazxsw poi

HTML看起来像这样：

<div class="mdc-card grid-item _ngcontent-oxb-1">
    <div class="mdc-card__media _ngcontent-oxb-1">
        <canvas class="_ngcontent-oxb-1" width="225" height="225"
                id="canvas-4"></canvas>
    </div>
    <div class="mdc-card__actions _ngcontent-oxb-1">
       ...
    </div>
</div>

来自Angular，但不应该与此有任何关系。

应用于此的唯一CSS是一些显示和对齐。我目前尝试设置mdc-card，设置tabindex: -1和设置disabled - 没有运气。

欢呼并提前致谢！

Answer 1

尝试css大纲

user-select: none

Answer 2

好吧，在搜索了更多的网页之后，我在CSS中找到了解决方案：

canvas#canvas-4:focus {
    outline-width: 0px!important;
}

发现它

canvas {
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}

。 webkit适用于移动浏览器。

干杯!