我一直在看教程,但我似乎无法弄清楚我哪里出错了.这似乎应该是非常直接的,但它给了我一些问题.下面是一些用于为canvas对象创建鼠标侦听器的简单代码.当前单击画布时,不会调用clickReporter函数.任何想法为什么不呢？
HTML5
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Play Area 2 - Mouse Events and the Canvas</title>
<script src="play_area_2.js" type="text/javascript"></script>
</head>
<body onload="init();">
<canvas id="myCanvas" width="500" height="400">
Your browser dosen't support the HTML5 canvas.</canvas><br />
</body>
</html>
JavaScript的
var canvas;
var context;
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
drawBox();
canvas.addEventListener('onclick',clickReporter,false);
}
function clickReporter(e) {
alert("clicked");
}
function drawBox() {
context.fillStyle = "black";
context.strokeRect(20,20,canvas.width-20,canvas.height-20);
}
解决方法
你应该使用’click’而不是’onclick’. “on”仅在将其设置为属性时使用(例如,canvas.onclick = clickReporter).
canvas.addEventListener('click',false);
UPDATE
有关点击与onclick的更多详细信息.
在JavaScript中有三种方法将事件侦听器附加到对象：
>通过element.addEventListener.使用此选项时,指定要设置的事件名称.例如,“点击”,“鼠标悬停”或“touchstart”.在这种情况下,您将指定事件的实际名称.这很有用,因为您可以向事件添加多个侦听器.
canvas.addEventListener('click',false);
canvas.addEventListener('click',otherClickReporter,false);
// Both clickReporter and otherClickReporter will be called on a click event.
>通过element.onsomeevent(onclick,onmouSEOver,ontouchstart).这是一个较旧的约定,完全标准并在HTML5中受支持.这是设置事件侦听器的一种非常简单的方法,但它有其缺点.使用此方法一次只能设置一个事件侦听器：
canvas.onclick = clickReporter; canvas.onclick = otherClickReporter; // Only otherClickReporter will be called on a click event.
>通过HTML本身.这是所有公约开始的地方.您可以直接在HTML中定义事件,就像前面的示例一样：
<canvas onclick="clickReporter()"></canvas>
假设clickReporter附加到窗口对象,则与以下内容相同.
<canvas></canvas>
<script>
canvasWeJustCreated.onclick = function() {clickReporter();}
</script>
可以说你正在做的事情是最好的方式.肯定会出现您想要使用其他方法的情况,例如在服务器上生成页面或尝试暂时禁止在iPhone上滚动时,但对于大多数应用程序,addEventListener最好.