Как передавать MouseEvent на canvas, перекрытый div?

Question

[unique_nickname]

Для упрощения: есть два компонента, div и canvas. Оба занимают весь экран, div (с элементами управления) поверх canvas-а (с помощью z-index, div НЕ родитель canvas). Можно ли как-то передавать MouseEvent (клики и т.д.) на canvas?

Зачем это нужно: поверх канваса находятся элементы управления, получается что сам canvas занимает весь экран, а когда часть рисунка попадает под элементы управления - они просто перекрываются. Но проблема, что в том месте где поверх canvas'a есть div - он не отлавливает ивенты и им нельзя управлять, соответственно

Comments

[Антон Антон]

А почему просто не положить канвас внутрь дива, но "под" элементы управления?

Answer 1

[Сергей delphinpro]

.div {
  pointer-events: none; /* отключить указатели на диве */
}

.div * {
  pointer-events: all; /* включить на внутренних элементах управления */
}