javascript - 将 HTML5 canvas 元素变成链接

Question

将 Canvas 元素变成链接的最佳方式是什么 - 我指的是整个 canvas 元素，而不仅仅是图像的一部分。

我尝试了显而易见的事情 - 将元素包装在 A 元素中 - 但在 IE9 中发现了问题。

以这个标记为例:

<a href="#link">
  <canvas width="100" height="100">
    //fallback
  </canvas>
</a>

我使用 CSS 设置了链接背景颜色的样式，使其在悬停时发生变化，并且在大多数支持浏览器的现代 Canvas 中发现它按预期工作 - 你悬停，背景改变颜色，你点击链接，链接被跟随。

但是，在 IE9 中，当鼠标悬停在元素上时，它无法识别它是一个链接 - 没有悬停效果，没有光标变为指针，现在单击也不会。

有趣的是，如果我向 A 元素添加一个 1 像素的边框，并将鼠标不稳定地悬停在 1 像素的边框上，IE9 会识别该链接，之后您可以将鼠标移到 Canvas 上并保持悬停状态声明并作为链接工作。

这几乎就像 Canvas 覆盖了链接，所以浏览器无法识别链接，只能识别 Canvas 元素 - 如果这有意义的话？

所以，我真的只想确定:

• 将 Canvas 元素简单地包装在 A 元素中是否可以接受 - 这只是 IE9 很奇怪还是我做错了？
• 如果我做错了，执行这个看似简单的任务的公认技术是什么？

谢谢

更新

好的，所以我在下面得到的答案都是正确的，但不幸的是在我的实现中也没有用。我的标记比上面的简化示例复杂得多，所以我猜测实际上还有其他原因导致了问题 - native 悬停事件和 JavaScript 附加事件 - 没有任何效果。

不过，我想出了一个解决问题的技巧。我为我的链接提供了不透明度为零的 RGBA 背景颜色。一旦在那里，一切都很好。我知道很奇怪，但已修复 :)

Answer 1

我不是 100% 确定 IE 中的 canvas 元素存在问题，但您可以更新 canvas 元素的 onclick 处理程序，将窗口位置更改为您想要的位置。

document.getElementById("mycanvas").onclick = function(e){
    window.location.href = 'http://www.google.com';
};

示例:http://jsfiddle.net/jonathon/HtmVS/

如果需要，您可以处理其他事件(如 mousein/mouseout)来设置光标。