将HTML5画布元素转换为链接

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元素 - 如果这有意义的话？

因此，我只想确定以下几点： 1. 直接将Canvas元素包装在A元素中是否可行 - 这只是IE9表现奇怪还是我做错了？ 2. 如果我做错了，那么完成这个看似简单的任务的已接受技术是什么？

谢谢！

更新：

好的，下面的答案都是正确的，但不幸的是在我的实现中并没有起作用。我的标记比上面的简化示例要复杂得多，所以我想实际上可能还有其他因素导致了问题 - 对于原生悬停事件和通过JavaScript附加的事件 - 没有什么是有效的。

但是，我想出了一个解决问题的方法。我给链接设置了一个RGBA背景颜色，透明度为零。一旦这样做，事情就正常了。虽然很奇怪，但问题已经解决 :)

- aaronrussell

---

我猜测这里...但是画布将会"覆盖"锚点元素，所以画布元素捕获了所有的事件。不确定为什么它没有传递到锚点，但或许您可以尝试调整这些元素的z-index样式？ - Dancrumb

Answer 1

我不完全了解IE中canvas元素的问题，但是您可以更新canvas元素的onclick处理程序，将窗口位置更改为您想要的位置。

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

例子：http://jsfiddle.net/jonathon/HtmVS/

如果您想要，您可以处理其他事件（例如mousein/mouseout）来设置光标。

- Jonathon Bolster

---

感谢您提供的示例。但是我发现我甚至无法将事件处理程序附加到画布元素...至少在我的示例中是如此。我已经在IE9中测试了您的模型，确实可以工作，但在我正在处理的实现中，事件处理程序却没有任何作用。 - aaronrussell

Answer 2

您可以使用JavaScript的onclick来处理此问题，并与CSS结合使用，在其上添加cursor: pointer;。您可以在CSS中实现canvas:hover来实现悬停效果。您可以将其与<a>结合使用，以允许用户通过链接/画布“标签”浏览。

- Tom van der Woerdt

Answer 3

如果您想使用jQuery，可以尝试以下方法。

$("#myCanvasId").click(function(){
window.open("https://www.google.com");
});

- Michael Tran

Answer 4

跨浏览器实现这个功能的方法是在画布上放置一个div，该div具有与画布完全相同的像素位置、宽度和高度。然后在该div上安装点击处理程序，并使用先前答案中建议的window.location.href。

...
<canvas id=".. >
<div id="overlay"/>
...

- Teemu Ikonen