MouseListener和HTML5画布对象

我一直在看教程,但我似乎无法弄清楚我哪里出错了.这似乎应该是非常直接的,但它给了我一些问题.下面是一些用于为canvas对象创建鼠标侦听器的简单代码.当前单击画布时,不会调用clickReporter函数.任何想法为什么不呢？

<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最好.

MouseListener和HTML5画布对象

解决方法

猜你在找的HTML5相关文章