Как сделать HTML-холст не сфокусированным / невыбираемым

Question

У меня возникли проблемы с созданием нескольких HTML-холстов без фокуса / невыбираемости - по крайней мере, так я думаю, это должно называться.

Я делаю сайт, где на самом деле можно выбрать несколько холстов, но это делается с помощью кнопки справа от каждого холста. Каждый холст отображает 3D-модель в WebGl, которую можно вращать с помощью мыши (сделано с помощью 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 {
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}

Нашел здесь . Веб-набор для мобильных браузеров.

Ура!

Answer 2

попробуй набросок css

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