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

Question

我得到了三个HTML5 canvas元素。 一个是透明的，并且完全覆盖不重叠的其他两个（我在上面绘制的内容必须叠加，因此其z索引必须是最高的）。

问题在于，最上面的一个（ 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>

Answer 2

您可以将三个<canvas>元素包装到一个父元素中，然后让事件冒泡到父元素并在那里处理它们。

使用pageX属性和pageY的性质event的对象，与一起offsetLeft ， 的offsetTop ， offsetWidth和的offsetHeight你的属性<canvas>元素，将让你翻译的鼠标事件的坐标，并确定他们将被触发，如果他们本来可以达到最底层的要素。