Javascript 将HTML5画布元素转换为链接

将画布元素转换为链接的最佳方式是什么？我指的是整个画布元素，而不仅仅是图像的一部分

我尝试过一件显而易见的事情——用A元素包装元素——但在IE9中发现了问题

以这个标记为例：

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

使用CSS，我设计了链接背景颜色的样式，以便在悬停时进行更改，我发现在大多数支持画布的现代浏览器中，它的工作方式与预期的一样-你悬停，背景颜色更改，你单击链接，链接就会被跟随

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

有趣的是，如果我在a元素中添加一个1像素的边框，并将鼠标不稳定地悬停在1像素的边框上，IE9会识别链接，然后你可以在画布上移动鼠标，它会保持其悬停状态并作为链接工作

这就好像画布覆盖了链接，所以浏览器无法识别链接，只能识别画布元素——如果这有意义的话

所以，我真的只想确定：

• 简单地将画布元素包装到a元素中是可以接受的——这只是IE9的怪异之处还是我做错了
• 如果我做错了，那么做这个看似简单的任务的公认技巧是什么

谢谢

更新 好的，下面我得到的答案都是正确的，但不幸的是，我的实现也不起作用。我的标记比上面的简化示例要复杂得多，所以我猜实际上还有其他原因导致了这个问题——本机悬停事件和附加了JavaScript的事件——什么都不起作用

---

然而，我想出了一个解决问题的方法。我给了我的链接一个RGBA背景色，不透明度为零。一旦有了它，一切都会很顺利。我知道这很奇怪，但已修复：）

您可以使用javascript的

onclick

来处理此问题，并将其与CSS结合起来放置

光标：指针在上面。然后可以在CSS中为悬停效果实现
canvas:hover
。您可以将其与
相结合，以允许用户通过链接/画布“制表”。
我对IE中画布元素的问题不是百分之百的了解，但您可以更新
画布
元素的onclick处理程序，将窗口位置更改为您想要的位置

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

例如：

如果需要，您可以处理其他事件（如mousein/mouseout）来设置光标。
跨浏览器的方法是在画布顶部放置一个div，该div与画布具有完全相同的像素位置、宽度和高度。然后在该div上单击安装处理程序，并按照前面的回答中的建议使用window.location.href

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

。。。
不确定是否要使用jQuery，但如果是，请尝试以下方法

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

我在这里猜测，因此评论。。。但是画布将绘制在锚元素上，因此画布元素将捕获所有事件。这就是为什么它没有被传给锚，我不确定。。。但是也许你可以玩转这些元素的z-index样式？谢谢你的介绍，并模拟一下这个例子。我发现我甚至不能将事件处理程序附加到canvas元素。。。至少在我的例子中。我已经在IE9中测试了您的模型，这确实有效，但在我的实现中，我正在处理的事件处理程序没有任何作用。