MouseListener 和 HTML5 画布对象

发布于 2024-12-09 13:41:32 字数 1182 浏览 0 评论 0原文

我一直在看教程，但我似乎无法弄清楚我哪里出错了。这看起来应该是非常简单的，但它给我带来了问题。下面是一些为画布对象创建鼠标侦听器的简单代码。当前单击画布时不会调用 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);
    }

原文

I have been looking at tutorials and yet I can't seem to figure out where I'm going wrong. This seems like it should be very straight forward yet it's giving me problems. Below is some simple code for creating a mouse listener for a canvas object. Currently function clickReporter is not being called when the canvas is clicked. Any ideas on why not?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彩虹直至黑白 2024-12-16 13:41:32

您应该使用“click”而不是“onclick”。 “on”仅在将其设置为属性时使用（例如，canvas.onclick = clickReporter）。

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

更新

有关 click 与 onclick 的更多详细信息。

在 JavaScript 中，可以通过三种方式将事件侦听器附加到对象：

通过 element.addEventListener。使用此选项时，您可以指定要设置的事件名称。例如，“单击”、“鼠标悬停”或“触摸启动”。在本例中，您指定事件的实际名称。这很有用，因为您可以向一个事件添加多个侦听器。
```
canvas.addEventListener('click', clickReporter, false);
canvas.addEventListener('click', otherClickReporter, false);
// clickReporter 和 otherClickReporter 都将在点击事件上被调用。
```
通过element.onsomeevent（onclick、onmouseover、ontouchstart）。这是一个较旧的约定，它是完全标准的并且在 HTML5 中受支持。这是设置事件侦听器的一种非常简单的方法，但它有其缺点。使用此方法一次只能设置一个事件侦听器：
```
canvas.onclick = clickReporter;
canvas.onclick = otherClickReporter;
// 只有 otherClickReporter 才会在点击事件上被调用。
```
通过 HTML 本身。这是所有会议开始的地方。您可以直接在 HTML 中定义事件，就像前面的示例一样：
```
;
```
这与以下内容相同，假设 clickReporter 附加到窗口对象。
```
;
<脚本>
    canvasWeJustCreated.onclick = function() {clickReporter();}
```

可以说，您正在做的方式是最好的方式。肯定会有您想要使用其他方法的情况，例如在服务器上生成页面或尝试暂时抑制 iPhone 上的滚动时，但对于大多数应用程序来说，addEventListener 是最好的。

You should be using 'click' and not 'onclick'. "on" is only used when setting it as a property (e.g., canvas.onclick = clickReporter).

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

UPDATE

More details on click vs. onclick.

There are three ways to attach an event listener to an object in JavaScript:

Through element.addEventListener. When you use this, you specify the event name you want to set. For example, 'click', or 'mouseover', or 'touchstart'. In this case, you're specifying the event's actual name. This is useful because you can add more than one listener to an event.
```
canvas.addEventListener('click', clickReporter, false);
canvas.addEventListener('click', otherClickReporter, false);
// Both clickReporter and otherClickReporter will be called on a click event.
```
Through element.onsomeevent (onclick, onmouseover, ontouchstart). This is an older convention which is fully standard and supported in HTML5. This is a very easy way to set the event listener but it has its drawbacks. Only one event listener can be set at a time with this method:
```
canvas.onclick = clickReporter;
canvas.onclick = otherClickReporter;
// Only otherClickReporter will be called on a click event.
```
Through the HTML itself. This is where all the conventions started. You can define an event directly in the HTML very much like the previous example:
```
<canvas onclick="clickReporter()"></canvas>
```
This is the same as the following, assuming that clickReporter gets attached to the window object.
```
<canvas></canvas>
<script>
    canvasWeJustCreated.onclick = function() {clickReporter();}
</script>
```

Arguably the way you are doing it is the best way. There will certainly be cases where you want to use the other methods, like when generating a page on the server or trying to temporarily suppress scrolling on an iPhone, but for most applications, addEventListener is best.

回复收藏 0 原文

~没有更多了~