如何使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轮廓

<Gallery
    style={{height:200,width:300, flex: 1, backgroundColor: 'white' }}
    // images={[
    // ]}
  /> 

Answer 2

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

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

找到了here。 该Webkit适用于移动浏览器。

干杯！