HTML 5 Canvas 事件处理程序工作？

Question

在 W3schools 中写有 "No support for event handlers"。但是当我将 onclick 附加到 canvas 时它起作用了。为什么？

<html>
<body>
 <canvas id="myCanvas" width="100" height="100" style="border:1px solid    #c3c3c3;" onclick="alert(1)">
</canvas>
<script>

Answer 1

因为 w3school 的内容应该有所保留。它们是正确的，并且为某些事情提供了很好的例子，但在其他事情上却直接错误 - 并且没有适当的机制来 tell/correct 它们。

Canvas 确实支持事件作为订阅（使用 addEventListener()）以及直接回调（例如 canvas.onclick = ...）。

对于按键，您需要使用 tabIndex 到 "activate" 捕捉焦点的能力。虽然它有焦点，但它也可以接收按键事件（您可以在任何情况下接收来自 window 对象的事件）。

var canvas = document.getElementById("canvas");
var out = document.getElementById("out");

canvas.addEventListener("keydown", output);
canvas.addEventListener("keyup", output);
canvas.addEventListener("mousedown", mouse);
canvas.addEventListener("mouseup", mouse);
canvas.addEventListener("mousemove", mouse);
// ... etc

function output(e) {out.innerHTML = e.type + ": " + e.keyCode}
function mouse(e) {out.innerHTML = e.type + ": x=" + e.clientX + " y=" + e.clientY}

canvas {background:#ddd}

<canvas id="canvas" tabIndex="0" width=400 height=150></canvas><br>
<output id="out"></output>

HTML 5 Canvas 事件处理程序工作？

HTML 5 Canvas Event Handler Working?

html5-canvas