Щелкните по элементу <Canvas />, но обнаружите зависание

Question

Я накладываю свою страницу на элемент canvas, и при наведении курсора на этот элемент запускается функция, однако под холстом есть объекты, на которые нужно щелкнуть. Как я мог сделать так, чтобы холст все еще обнаруживал события наведения и продолжал свою функцию mouseMove, но позволял пользователю взаимодействовать с материалом под ним?

Я исследовал и попробовал указатель-события свойства CSS: нет, и обнаружил, что вы можете назначить события-указателя: нет для родителей и pointerEvents: автоматически для детей, чтобы решить эту проблему, однако, насколько я понимаю, вы не может обернуть элемент canvas, чтобы он был родителем для базовых элементов div, поэтому кто-нибудь знает способ его решения?

В основном элемент canvas используется для создания интерактивной тепловой карты, когда пользователи используют веб-сайт, но мне нужно иметь возможность создать эту тепловую карту и получить доступ к содержимому под ней

Answer 1

Вы можете попробовать что-то вроде этого.

Здесь у вас есть div.container, равный по размеру canvas.Теперь зависание над div.container - это то же самое, что зависание над canvas.И есть еще div для любого кликабельного контента, который вы хотите.

.container {
  border: 1px solid green;
  height: 200px;
  width: 200px;
}

canvas {
  border: 1px solid black;
  bpx-sizing: border-box;
  height: 200px;
  pointer-events: none;
  position: absolute;
  width: 200px;
}

<div class="container">
  <canvas></canvas>
  <div>Other content for clicks</div>
</div>