Question

我在页面上覆盖了canvas元素，并且在该元素上悬停会触发一个功能，但是在画布下面应该单击一些对象。我该怎么做，以便画布仍能检测到悬停事件并继续其mouseMove功能，但允许用户与其下的内容进行交互？

我研究并尝试了CSS属性的指针事件：无，发现可以将指针事件：无分配给父对象和指针事件：自动给孩子使用，以解决此问题，但是据我了解无法将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>

单击通过<canvas>元素，但检测到悬停

1 个答案: