我看到很多关于如何获取html5画布元素以接收鼠标点击的问题，我正在使用画布作为叠加层，鼠标点击不会通过以下元素。我正在将图像加载到画布中，我认为这可能是问题，但我也尝试了一个空的画布，我得到相同的结果。
这是一个例子：
与图像：
http://www.1luckypixel.com/paranormal/canvas_test.html
该链接到谷歌，但它没有注册。
我的理解是，画布默认情况下对鼠标是透明的？
解决方法
如果不需要跨浏览器功能，那么有一个简单的解决方案。在支持非SVG元素的浏览器(webkit，Mozilla或者其他，但不是IE)中，您可以使用名为pointer-events的css属性。从MDN：
“CSS属性指针事件允许作者在什么情况下(如果有的话)控制特定图形元素可以成为鼠标事件的目标。当未指定此属性时，visiblePainted值的相同特征适用于SVG内容。
除了指示该元素不是鼠标事件的目标之外，值none指示鼠标事件“通过”元素，而是指向该元素的“underneath”。
警告：CSS中的指针事件在非SVG元素中的使用是实验性的。目前在CSS3 UI草案规范中定义，有讨论将其推迟到CSS4。
至少，您可以使用Modernizr来检测指针事件支持，并在不支持它的浏览器上执行Simon Sarris’s answer中提到的不透明度技巧。
另外，如果您的应用程序是特定于谷歌地图，您可以插入您的画布作为谷歌地图覆盖，从而避免了问题在一起。
例：
http://www.patrick-wied.at/static/heatmapjs/demo/maps_heatmap_layer/gmaps.php
原文地址：https://www.jb51.cc/html5/168926.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
