Question

我看到很多关于如何让html5 canvas元素接收鼠标点击的问题，我使用画布作为叠加层，鼠标点击不会转到下面的元素。我正在将一个图像加载到画布中，我认为这可能是问题，但我也尝试使用空画布，我得到了相同的结果。

这是一个例子：与图像： http://www.1luckypixel.com/paranormal/canvas_test.html 该链接转到谷歌，但它没有注册。

我的理解是默认情况下画布对鼠标是透明的吗？

Answer 1

如果不要求跨浏览器功能，那么有一个简单的解决方案。在支持非SVG元素（webkit，Mozilla和其他人，但特别是IE）的浏览器上，您可以使用名为 pointer-events 的css属性。来自MDN：

“CSS属性指针事件允许作者控制特定图形元素在什么情况下（如果有的话）成为鼠标事件的目标。当未指定此属性时，visiblePainted值的相同特征适用于SVG内容

除了指示该元素不是鼠标事件的目标之外，值none指示鼠标事件“穿过”该元素并将目标转移到该元素的“下面”。

警告：在非SVG元素的CSS中使用指针事件是实验性的。目前在CSS3 UI草案规范中定义，有讨论将其推迟到CSS4。 “

至少，您可以使用Modernizr检测指针事件支持，并在不支持它的浏览器上执行Simon Sarris's answer中提到的不透明技巧。

此外，如果您的应用程序特定于谷歌地图，您可以将画布作为谷歌地图叠加层插入，从而避免所有问题。

实施例： http://www.patrick-wied.at/static/heatmapjs/demo/maps_heatmap_layer/gmaps.php

Answer 2

假设您无法将链接放在画布上方......

对于新的/体面的浏览器，只需使用此CSS：

#canvas { pointer-events:none; }

IE +旧浏览器的一种肮脏的解决方法（你可以删除对jQuery的依赖）：

jQuery('#canvas').click(function(e) {
    window.location = jQuery('#element-under-canvas').attr('href');
});

显然，这只支持当前的锚点，你需要知道画布下的特定元素（或者可以使用jQuery选择器魔术找到它）。

Answer 3

简而言之，您无法通过点击。

但第二个最短的答案是你确实可以做任何你想要的事情！你必须愿意对解决方案感到有点奇怪。

我能想到的第一种方式有点令人抓狂但很容易：对于画布后面的每个项目，在画布前面制作一个类似的秘密物品。然后将您想要的事件放在秘密项目上：

<!-- A visible button behind the canvas -->
<button id="but" type="button" style="position: absolute; top: 100px; left: 100px;">Click Me!</button>

<canvas id="can" width="500" height="500" style="position: absolute;"></canvas>

<!-- A near copy of the visible button, but this one is invisible and in front of the canvas! -->
<button id="but" type="button" onclick="alert('click!')" style="position: absolute; top: 100px; left: 100px; opacity: 0;">Click Me!</button>

如果您想查看代码click here

如果你想要可点击的画布背后有一百个东西，那么还有一些更疯狂但更可维护的方法，但如果你只想要1-3个你喜欢的东西，这可能是最容易做到的点击画布后面。

Answer 4

我能够通过像这样设置画布来实现这一点：

<div>
    <a href='#'>my link</a>
    <canvas></canvas>
</div>

然后我在CSS中将它设置为以下内容：

canvas {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index:-1; /* NOT SURE HOW SUPPORTED THIS IS, IT WORKED IN CHROME */
}

div中的链接是可点击的，无论我在运行时画到画布上的是什么。

希望这有帮助！

Answer 5

借用Simon Sarris的回答，在某些情况下使用画布和画布可能会更简单。控件在同一平面上。根据控件的不同，它并不总是允许画布在控件的顶部绘制，但在Joe的原始问题中似乎并不需要。重要的是要确保画布和控件在同一个Z平面上，两者都有一个使用“position”关键字的样式，并且控件的HTML在canvas语句之后。以下是使用此方法组合控件的画布示例。

<canvas id="can" width="500" height="500" style="z-index:2; position: absolute;"></canvas>
<!-- Put text and a link on the same plane as the canvas -->
<div style="position: relative; z-index: 2;">
   <a href="http://www.google.com/">Click</a> this Google link.
</div>

Answer 6

我不确定这个程序如何，但Simon Sarris实际上在评论中提供了解决方案：

不幸的是我的其他方法不会在这种情况下工作。 :(但是，你可能仍然混淆不透明，直到你有一些接近你的东西想。这是一个透明的例子地图显示它背后的画布。它看起来好像绿色框在顶部但它真的只是显示： jsfiddle.net/un9yW/11当然，这样做这种方法意味着没有办法制作一个绿色的盒子来完全覆盖地图的一部分，依此类推有点蹩脚。如果我，我会告诉你的想想任何可行的事情为了你的情况。 - 西蒙·萨里斯7 小时前

Answer 7

以下是我解决这个问题的方法......

我有一个圆形的用户界面设备（在纯HTML5画布上绘制，这是一个正方形）。只有圆圈是彩色的，画布的其余部分是透明的，我想点击它。在方形帆布的角落下，Kinetic JS舞台上有各种形状。

通常，您无法点击画布。

但是你可以将click事件发送到Kinetic形状，并激活该形状中的事件监听器，如下所示：

    $( '#myCanvasUserInterfaceLayer' ).on( 'click', function( e ) {

        var pos = getMousePos( e );
        var obscuredKineticShape = kineticLayer.getIntersection( pos );

   // (Note: console.log(obscuredKineticShape) and you find that 
   // 'getIntersection' returns an object with the topmost shape 
   //  at the click point on the kinetic stage within it, called 'shape').

        obscuredKineticShape.shape.fire( 'mousedown' ); 

    });

     function getMousePos( e ) {

        return {
          x: e.pageX,
          y: e.pageY
        };
      }

Answer 8

我认为最好动态更改z-index。如果你需要使用控件设置他们的z-index高于画布。如果你需要使用canvas - 将它的z-index设置为高于控件。确切的方法如何做到这一点取决于你的情况。您可以监听mousedown / mouseup事件，或者在某些区域上移动鼠标。

Answer 9

将画布 previewProvider 设置为“无”将允许触发底层鼠标点击事件。

styles.pointerEvents

通过html画布获得点击次数

9 个答案: