<分区>
javascript - 如何使 HTML Canvas 不可聚焦/不可选择
我在使多个 HTML Canvas 不可聚焦/不可选择时遇到了一些麻烦 - 至少我认为它必须这样称呼。
我正在做一个实际上可以选择多个 Canvas 的站点，但这是通过选中每个 Canvas 右侧的按钮来完成的。每个 Canvas 在 WebGl 中呈现一个 3D 模型，可以用鼠标旋转(用 Babylon.js 完成)。但是，每当我在 Canvas 中旋转模型时， Canvas 本身就会被“选中”，这是不应该的。这是非常具有误导性的，因为整个网站都是关于选择 Canvas 的。
这是在 Canvas 内旋转 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 - 没有成功。
提前干杯和感谢!
最佳答案
试试 CSS 大纲
canvas#canvas-4:focus {
outline-width: 0px!important;
}
关于javascript - 如何使 HTML Canvas 不可聚焦/不可选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55058738/