向画布添加事件侦听器？答案

【问题标题】：Adding an event listener to a canvas?向画布添加事件侦听器？
【发布时间】：2020-04-25 02:44:02
【问题描述】：

我看过与此类似的帖子，并观看了一些教程，但我无法让我的画布拥有事件侦听器。这是我得到的：

<canvas id="ctx" width="599" height="575" style="border:1px solid #000000;"></canvas>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.addEventListener('mousedown',onDown,false);
function onDown(event){
console.log("click");
};
ctx.font = "normal 20pt Pixelate";
ctx.fillStyle= "gray";
ctx.fillRect  (0,0, 700, 700);
</script>

那么我该如何添加呢？在此之后我有一个指向外部 js 脚本的链接，该脚本需要引用单击来更改变量，但即使将事件侦听器放在那里，它位于画布声明之后，仍然无法建立它。浏览器说 ctx.addEventListener 不是函数。

【问题讨论】：

stackoverflow.com/questions/41181372/…

标签： javascript events canvas mouseevent dom-events

【解决方案1】：

事件监听器应该应用到HTMLCanvasElement（实际的DOM元素）而不是RenderingContext。

例如，这将使您的示例工作：

var canvas = document.getElementById("ctx");
var ctx = canvas.getContext("2d");
canvas.addEventListener('mousedown',onDown,false);

来源：

【讨论】：