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

像弗雷德里奇在答案中指出的那样，有几种方法可以实现这一目标。忽略元素上鼠标事件的另一种方法是分配以下样式。

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>

Answer 2

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

使用event对象的pageX和pageY属性，结合offsetLeft，offsetTop，offsetWidth和{{ 3}} <canvas>元素的属性，允许您翻译鼠标事件的坐标，并确定如果它们已经到达底部元素，它们将被触发的位置。

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

2 个答案: