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

Question

我在使几个HTML画布不可聚焦/不可选择方面遇到了一些麻烦--至少我认为它必须这样叫。

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

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

​

这是旋转3D模型或只需单击/右键单击后的外观：

​

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>

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

唯一适用于此的CSS是一些显示和对齐。我目前已经尝试了设置tabindex: -1、设置disabled和设置user-select: none --都没有成功。

提前干杯并致谢！

Answer 1

尝试css大纲

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