4

我得到了三个 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>
4

2 回答 2

2

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

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>
于 2012-10-22T21:05:14.980 回答
1

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

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

于 2012-10-22T18:37:38.370 回答