Question

在W3schools中，它写道：“不支持事件处理程序＆＃34;但是当我附加onclick画布它的工作时。为什么？

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

Answer 1

因为w3school的内容应该带着一粒盐。它们是正确的，并为某些事情提供了很好的例子，但在其他事情上是直接错误的 - 并且没有适当的机制来判断/纠正它们。

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

对于密钥，您需要使用tabIndex来激活＆＃34;抓住焦点的能力。虽然它具有焦点，但它也可以接收关键事件（您可以在任何情况下接收来自window对象的事件。）

＆＃13;

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}

＆＃13;

canvas {background:#ddd}

＆＃13;

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

＆＃13;

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

1 个答案: