通过HTML画布获得点击 [英] get clicks through html canvas

问题描述

我看到了很多有关如何使html5 canvas元素接收鼠标点击的问题，我将画布用作覆盖层，而鼠标点击并没有遍历下面的元素.我正在将图像加载到画布中，我认为这可能是问题所在，但我也尝试了使用空画布来获得相同的结果.

I'm seeing a lot of questions about how to get the html5 canvas element to receive mouse clicks, I'm using the canvas as an overlay and the mouse clicks aren't going through to the elements below. I'm loading an image into the canvas, and I thought that might be the problem but I've also tried it with an empty canvas and I get the same result.

这里是一个示例:与图像: http://www.1luckypixel.com/paranormal/canvas_test.html 链接转到Google，但未注册.

Here is an example: with the image: http://www.1luckypixel.com/paranormal/canvas_test.html the link goes to google but it's not registering.

据我了解，默认情况下画布对鼠标是透明的?

It's my understanding that the canvas is transparent to the mouse by default?

推荐答案

如果不需要跨浏览器功能，那么有一个简单的解决方案.在支持非SVG元素的浏览器(Webkit，Mozilla以及其他(但尤其不是IE))上，可以使用名为 pointer-events 的css属性.从MDN:

If cross browser functionality is not a requirement, then there is an easy solution. On browsers that support it for non SVG elements(webkit, Mozilla and maybe others, but notably not IE), you can use the css property called pointer-events. From the MDN:

"CSS属性指针事件允许作者控制在什么情况下(如果有的话)特定图形元素可以成为鼠标事件的目标.当未指定此属性时，visiblePainted值的相同特征将应用于SVG内容

"The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.

除了表示该元素不是鼠标事件的目标之外，该值none指示鼠标事件通过"该元素并以该元素之下"的任何对象为目标.

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

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

Warning: The use of pointer-events in CSS for non-SVG elements is experimental. Currently defined in the CSS3 UI draft specification, there are discussion to postpone it to CSS4."

至少，您可以使用Modernizr来检测对指针事件的支持，并执行 Simon Sarris的答案中提到的不透明技巧.a>在不支持它的浏览器上.

At the very least, you can use Modernizr to detect pointer-events support and do the opacity trick mentioned in Simon Sarris's answer on browsers that don't support it.

此外，如果您的应用程序特定于Google地图，则可以将画布插入Google Maps叠加层中，从而避免了所有问题.

Also, if your application is specific to google maps, you can insert your canvas as a google maps overlay, thus avoiding the problem all together.

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

这篇关于通过HTML画布获得点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！