javascript - Canvas 限制鼠标与重叠元素交互(z-index 高于 Canvas )

Question

我在另一个 div 的确切位置有一个 Canvas 。我有意将一个放在另一个上面。

我必须与 div 交互以提供输入(通过鼠标手势输入)，但位于同一位置的 Canvas 不允许我提供输入。

我不能将 Canvas 放在其他任何地方，因为我的输出是来自 Canvas 的响应以及 div 中的静态元素的组合。

这是我的index.html

<div class="maincontainer">
    <h2 id="heading" class="heading">Please set your password</h2>
<div id="patterncontainer" class="patterncontainer">
</div>
<canvas id="canvas" class="canvas"></canvas>
</div>

样式.css

.patterncontainer {
    margin-left: 32.5px;
    position: absolute;
    width: 225px;
    height: 225px;
    background: #66C285;
    padding: 7.5px;
    border-radius: 10px;
    z-index: 1;
}

.canvas {
    margin-left: 32.5px;
    position: absolute;
    left: 0px;
    width: 225px;
    height: 225px;
    padding: 7.5px;
    border-radius: 2px;
    /*margin: 22.5px;*/
    /*background-color: #FFF;*/
    /*background-color: rgba(114, 160, 204, 1);*/
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    /*-webkit-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);
    -moz-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);
    box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);*/
    /*display: none;*/
    z-index: -1;
}

这是我的js文件的一部分

var canvas = document.getElementById("canvas");
// canvas.style.display = inline;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
ctx.fillStyle="#FF0000";

我怎样才能与 patterncontainer div 交互，同时仍然在同一个地方有 Canvas ？

如果需要任何进一步的信息，请发表评论。

Answer 1

告诉 Canvas 不要监听事件，这样事件就会落到 div 中。

CSS:

canvas{pointer-events:none;}