Question

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

我必须与div交互以提供输入（通过鼠标手势输入）但是在同一个地方的画布不允许我给我输入。

我无法将画布放在其他任何地方，因为我的输出是画布的响应以及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>

的style.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进行交互？

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

Answer 1

告诉画布不要听事件，以便事件落到div。

CSS：

canvas{pointer-events:none;}

画布限制鼠标与重叠元素交互（z-index高于画布）

1 个答案: