附加在画布上的事件侦听器只接收codeSandbox中的{“codeSandbox”：true}对象

Question

canvas.onmousedown = function (event) {
  console.log(JSON.stringify(event)); // this logs {"isTrusted":true} 
};

同宽

canvas.addEventListener("mousedown",  function (event) {
  console.log(JSON.stringify(event)); // this logs {"isTrusted":true} 
});

当我尝试只记录event而不解析它时，应用程序就会崩溃

Answer 1

沙箱里有很多代码，我只想把重点放在你这里.

鼠标事件对象是复杂的，而且很可能JSON.stringify正在走捷径；如果您试图输出整个对象，它将是缓慢的，或者它可能会崩溃，就像您描述的那样，但是这里还有其他属性，您可以在下面的示例中看到它。

​

var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle = "red"

for (let i = 10; i < 100; i += 10 )
  ctx.rect(i, i, 50, 50);
ctx.stroke();

canvas.onmousedown = function (event) {
  console.log(JSON.stringify(event));
  console.log(event.x, event.y);
  
  ctx.beginPath()
  ctx.arc(event.x, event.y, 5, 0, 8)
  ctx.fill();
};

body { margin: 0 }

<canvas id="canvas"></canvas>

​

您可以看到，我正在使用event.x, event.y在用户单击的点绘制圆圈。

您可以在正式文档中阅读更多有关可用属性的信息：

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#properties

我认为你的最终目标不仅仅是输出：

console.log(JSON.stringify(event))还有更多你需要做的事情.

也许最好问个新问题..。

在那里解释一下，你在那些事件中想做什么，如果有什么错误，你会得到什么。