Я хотел нарисовать на холсте, который находится поверх другого элемента управления и также может получить доступ к элементу управления, возможно ли это в HTML?

Question

У меня есть сценарий использования для рисования линий / фигур с помощью API-интерфейсов Canvas или SVG. Эти графические объекты будут нарисованы на слое, который находится над набором элементов управления.Проблема, с которой я столкнулся, заключается в том, что после размещения холста поверх элементов управления я не могу получить доступ к элементам управления, например щелкнуть флажок / кнопку и т. Д. Как я могу включить это?1003 *

<div>
   <div id="layer1" style="position:absolute;top:0px;left:10px">
         <input type="submit"/>
    </div>
    <canvas id="layer2" style="position:absolute;top:0px;left:10px"></canvas>
</div>

В приведенном выше примере я не могу нажать кнопку «Отправить» из-за слоя сверху. Я хотел нарисовать круг вокруг кнопки, в то же время я должен был это сделать.в состоянии нажать на кнопку, а также.

Возможно ли это в HTML?

Answer 1

Как правило, вы не можете щелкнуть «через» HTML-элементы, но у вас все еще есть много вариантов.

Одним из очень быстрых решений является использование pointer-events: none; в вашем коде стиля для холста.

Это будет работать в Firefox / chrome / safari, но не в IE.

Для IE вам нужно стать умнее.

... Но почему бы просто не поставить кнопку сверху вместо холста сверху? Быстрый способ сделать это - дать холсту z-index: -1; в его стиле.

Так что теперь все вместе:

<div>
   <div id="layer1" style="position:absolute;top:0px;left:10px">
         <input type="submit"/>
    </div>
    <canvas id="layer2" style="position:absolute;top:0px;left:10px; border: 1px solid black; pointer-events: none; z-index: -1;"></canvas>
</div>