javascript – 将HTML5 canvas元素转换为链接

前端之家收集整理的这篇文章主要介绍了javascript – 将HTML5 canvas元素转换为链接前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

将Canvas元素转换为链接的最佳方法是什么 – 我指的是整个画布元素,而不仅仅是图像的一部分.

我尝试过一个显而易见的事情 – 将元素包装在A元素中 – 但在IE9中查找问题.

以此标记为例:

使用CSS我已经设置链接背景颜色在悬停时更改,并且我发现在大多数现代画布支持浏览器中它按预期工作 – 你悬停,背景改变颜色,你点击链接,链接被遵循.

但是,在IE9中,当鼠标悬停在元素上时,它无法识别出它是一个链接 – 没有悬停效果,没有光标变为指针,单击会立即执行.

有趣的是,如果我向A元素添加1像素边框,并将鼠标悬停在1像素边框上,IE9会识别链接,之后您可以将鼠标移到画布上并保持其悬停状态并正常工作作为一个链接.

这几乎就像画布覆盖链接一样,因此浏览器无法识别链接,只能识别画布元素 – 如果这有意义的话?

所以,我真的只想确定一下:

>简单地将Canvas元素包装在A元素中是可以接受的 – 这只是IE9很奇怪还是我做错了?
>如果我做错了,做这个看似简单的任务的公认技术是什么?

谢谢

UPDATE

好的,所以我在下面的答案都是正确的,但不幸的是,我的实现也没有.我的标记比上面的简化示例复杂得多,所以我猜测实际上还有其他东西正在引起问题 – 本机悬停事件和附带JavaScript的事件 – 没有什么工作.

但是,我想出了一个解决问题的黑客.我给链接一个RGBA背景颜色,不透明度为零.一旦那样,事情就好了.奇怪我知道,但修复:)

最佳答案

猜你在找的HTML相关文章