堆叠的画布元素，最顶层的画布可防止事件到达其他元素答案

【问题标题】：Stacked canvas elements, topmost canvas prevents events to reach the others堆叠的画布元素，最顶层的画布可防止事件到达其他元素
【发布时间】：2012-10-12 14:39:36
【问题描述】：

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

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

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

对于这个项目，我需要使用hammer.js和no 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>

【问题讨论】：

标签： javascript html canvas html5-canvas dom-events

【解决方案1】：

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

pointer-events:none;

它的很好得到很好的支持，效果很好。

Live Demo

所以你的情况是

<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>

【讨论】：

嗯，Internet Explorer 和 Opera do not support pointer-events，所以也许 广泛支持 有点乐观:)
啊，好点..出于某种原因，我认为 IE8+ 支持它。歌剧咩。
这解决了我的问题（我目前专门为 Safari 和 Chrome 开发，Web Audio 的东西）
@janesconference 是的，我想如果有人使用画布工作，他们无论如何都会使用非常称职的浏览器。

【解决方案2】：

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

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

【讨论】：