通过html画布获得点击次数

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指示鼠标事件"穿过"元素并且目标是"该元素"下面的任何内容.

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

至少,您可以使用Modernizr来检测指针事件支持,并使用Simon Sarris在不支持它的浏览器上回答的不透明技巧.

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

Answer 2

假设你不能把链接放在画布上面......

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

#canvas { pointer-events:none; }

IE +旧浏览器的一个肮脏的解决方法(你可以删除对jQuery的依赖):

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

显然,这只支持锚点,你需要知道画布下的特定元素(或者可以使用jQuery选择器魔术找到它).