如何将简单的onClick事件处理程序添加到画布元素中？

我是一位经验丰富的Java程序员，但我在近十年来第一次研究JavaScript/HTML 5。我完全困惑于什么应该是最简单的事情。

举个例子，我只想画一些东西，并在其中添加一个事件处理程序。我肯定我在做些蠢事，但我到处找遍了，没有任何建议(例如，这个问题的答案：将onclick属性添加到JavaScript输入)起作用。我正在使用Firefox 10.0.1。我的代码如下。您将看到几行注释，在每一行的末尾都描述了发生了什么(或不发生什么)。

这里正确的语法是什么？我要疯了！

<html><body>
    <canvas id="myCanvas" width="300" height="150"/>
    <script language="JavaScript">
        var elem = document.getElementById('myCanvas');
        // elem.onClick = alert("hello world");  - displays alert without clicking
        // elem.onClick = alert('hello world');  - displays alert without clicking
        // elem.onClick = "alert('hello world!')";  - does nothing, even with clicking
        // elem.onClick = function() { alert('hello world!'); };  - does nothing
        // elem.onClick = function() { alert("hello world!"); };  - does nothing
        var context = elem.getContext('2d');
        context.fillStyle = '#05EFFF';
        context.fillRect(0, 0, 150, 100);
    </script></body>

守着星空守着你

浏览 530回答 3

3回答

哔哔one

我再次提出以下条款：HTML 5画布的命中区域检测及如何侦听画布形状上的单击事件经历了不同的情况。但是，它不包括addHitRegionAPI，这肯定是最好的方法(使用数学函数和/或比较非常容易出错)。此方法将详细说明。关于developer.mozilla

饮歌长啸

可能很晚了，但我只是在为我的回答做准备的时候读到这篇文章。70-480考试，发现这个有用-var elem = document.getElementById('myCanvas');elem.onclick = function() { alert("hello world"); }注意事件为onclick而不是onClick.JS Bin举个例子。

随时随地看视频慕课网APP