堆叠的画布元素，顶部的画布会阻止事件传递到其他画布。

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>

- janesconference

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>

- Loktar

---

好的，Internet Explorer和Opera不支持pointer-events，所以“广泛支持”可能有点乐观 :) - Frédéric Hamidi

啊，说得好。不知为何我以为IE8+支持它。Opera就算了吧。 - Loktar

这解决了我的问题（我目前专门为Safari和Chrome开发Web Audio相关内容）。 - janesconference

@janesconference 是的，我认为如果有人正在使用canvas进行工作，那么他们肯定已经在使用一个相当有竞争力的浏览器了。 - Loktar

Answer 2

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

使用event对象的pageX和pageY属性，结合您的<canvas>元素的offsetLeft、offsetTop、offsetWidth和offsetHeight属性，将允许您转换鼠标事件的坐标，并确定它们如果能够达到底部元素会触发哪里。

- Frédéric Hamidi