MouseListener和HTML5画布对象

Question

MouseListener和HTML5画布对象

Aus*_*tin 7 html javascript dom-events html5-canvas

我一直在看教程,但我似乎无法弄清楚我哪里出错了.这似乎应该是非常直接的,但它给了我一些问题.下面是一些用于为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>

Run Code Online (Sandbox Code Playgroud)

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);
    }

Run Code Online (Sandbox Code Playgroud)

Answer 1

Bri*_*kel 21

你应该使用'click'而不是'onclick'."on"仅在将其设置为属性时使用(例如,canvas.onclick = clickReporter).

canvas.addEventListener('click', clickReporter, false);

Run Code Online (Sandbox Code Playgroud)

UPDATE

有关点击与onclick的更多详细信息.

在JavaScript中有三种方法将事件侦听器附加到对象:

通过元素 .addEventListener.使用此选项时,指定要设置的事件名称.例如,"点击","鼠标悬停"或"touchstart".在这种情况下,您将指定事件的实际名称.这很有用,因为您可以向事件添加多个侦听器.
```
canvas.addEventListener('click', clickReporter, false);
canvas.addEventListener('click', otherClickReporter, false);
// Both clickReporter and otherClickReporter will be called on a click event.
```
Run Code Online (Sandbox Code Playgroud)
通过元素 .onsomeevent(onclick,onmouseover,ontouchstart).这是一个较旧的约定,完全标准并在HTML5中受支持.这是设置事件侦听器的一种非常简单的方法,但它有其缺点.使用此方法一次只能设置一个事件侦听器:
```
canvas.onclick = clickReporter;
canvas.onclick = otherClickReporter;
// Only otherClickReporter will be called on a click event.
```
Run Code Online (Sandbox Code Playgroud)
通过HTML本身.这是所有公约开始的地方.您可以直接在HTML中定义事件,就像前面的示例一样:
```
<canvas onclick="clickReporter()"></canvas>
```
Run Code Online (Sandbox Code Playgroud)
假设clickReporter附加到窗口对象,则与以下内容相同.
```
<canvas></canvas>
<script>
    canvasWeJustCreated.onclick = function() {clickReporter();}
</script>
```
Run Code Online (Sandbox Code Playgroud)

可以说你正在做的事情是最好的方式.肯定会出现您想要使用其他方法的情况,例如在服务器上生成页面或尝试暂时禁止在iPhone上滚动时,但对于大多数应用程序,addEventListener最好.

归档时间：	14 年前
查看次数：	23444 次
最近记录：	5 年，12 月前