堆叠的画布元素，最上面的画布可防止事件到达其他画布

Question

我得到了三个 HTML5 画布元素。一个是透明的，完全覆盖另外两个，不重叠（我在上面画的东西一定是叠加的，所以它的z-index一定是最高的）。

问题是最上面的一个 ( overlay_area) 阻止了其他两个接收事件。我不需要最上面的事件接收事件，所以

• 有没有办法阻止最顶层的画布接收事件？
• 如果没有，有没有办法将事件传递到底部画布？

对于这个项目，我需要使用hammer.js，而不是jquery。

<canvas id="overlay_area"
        style="z-index: 8; position:absolute; left:0px; top:35px;"
        height="762px" width="968px">
        This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>

    <canvas id="wave_area"
        style="z-index: 5;
        position:absolute;
        left:0px;
        top:35px;"
        height="762px" width="200px">
        This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>

    <canvas id="edit_area"
        style="z-index: 5;
        position:absolute;
        left:200px;
        top:35px;"
        height="762px" width="768px">
        This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>

Answer 1

正如 Frederic 在他的回答中指出的那样，有几种方法可以实现这一目标。忽略元素上的鼠标事件的另一种方法是分配以下样式。

pointer-events:none;

它得到了很好的支持并且工作得很好。

现场演示

所以在你的情况下会是

<canvas id="overlay_area"
    style="z-index: 8; position:absolute; left:0px; top:35px; pointer-events:none;"
    height="762px" width="968px">
    This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>