我正在尝试向图片添加事件监听器，因此一旦单击，它就会将我带到另一个页面，目前我将它带到下一页，但不是在我单击图片时，而是在我单击任意位置时在 Canvas 上
最佳答案
响应 Canvas 点击事件
哎呀，看来您的问题被切断了!在您的下一个问题上，请务必不要按“Enter”键 - 您将立即发布部分编写的问题，而不是在问题中另起一行(别担心……我们都已经做到了)。
尼克，“欢迎来到 stackoverflow”——这里真的充满了答案!
Norguard 关于 Canvas 无法跟踪您单击的图像的说法是正确的。将 Canvas 视为艺术家的画架，您正在该画架上绘制图像。是的，画架包含图像，但画架无法知道您在哪里绘制图像。
为了在学习时保持简单，请尝试从每个 Canvas 仅包含 1 个图像开始(是的，您可以拥有与图像一样多的 Canvas 元素)。
如果您想从每个 Canvas 1 个图像开始，请使用以下代码和 fiddle :http://jsfiddle.net/m1erickson/KGKYg/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
}
img.src="http://dl.dropbox.com/u/139992952/coffee.png";
canvas.addEventListener("click", function (e) { alert("use your linke totake me away...!"); });
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
[编辑:响应键盘事件]
以下是监听用户按键并做出响应的方法:
// listen for keyboard events
window.addEventListener('keydown',keyIsDown,true);
// process the keystrokes
function keyIsDown(event){
switch (event.keyCode) {
case 38:
// "UP" was pressed, do UP stuff
break;
case 40:
// "DOWN" was pressed, do DOWN stuff
break;
}
}
关于javascript - Canvas 添加事件监听器点击图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15391949/