CodeSandbox中canvas事件监听仅返回isTrusted 直接打印event致崩溃

异常表现 #

在CodeSandbox开发环境中为canvas元素绑定事件监听器时，会出现两类异常：

• 对回调接收的event对象执行JSON.stringify序列化后打印，输出结果仅为{"isTrusted":true}，无法获取鼠标坐标、触发元素、按键状态等其他事件属性
• 不对event做序列化处理，直接打印原生event对象会导致应用崩溃

两种事件绑定方式表现完全一致，复现代码如下：

方式1：onxxx属性绑定 #

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

方式2：addEventListener绑定 #

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

原因说明 #

1. 序列化仅得到isTrusted是JS原生行为，并非环境bug
   DOM的MouseEvent是宿主提供的特殊对象，不属于普通JavaScript对象：clientX、offsetY、target等绝大多数常用事件属性，都定义在事件对象的原型链上，属于不可枚举属性。而JSON.stringify只会遍历对象自身的可枚举属性，默认情况下事件对象实例自身只有isTrusted这一个可枚举属性，所以序列化结果自然只有该字段，这个表现在所有浏览器环境下都一致，和CodeSandbox无关。

2. 直接打印event崩溃是CodeSandbox沙箱隔离机制导致
   CodeSandbox为了实现代码运行环境的沙箱隔离，会通过Proxy对注入到用户代码的DOM对象做代理拦截。当控制台尝试深打印（即展开完整对象结构）MouseEvent实例时，会遍历事件对象的原型链、访问被沙箱拦截的受限属性，部分场景下还会触发循环引用遍历的异常逻辑，最终导致运行时报错、应用崩溃。

解决方法 #

• 日常开发中不要尝试全量序列化、打印原生事件对象，只按需读取需要的具体属性即可，这也是前端事件处理的通用最佳实践。
  正确写法示例：

  canvas.addEventListener("mousedown",  function (event) {
    // 按需提取需要使用的字段，不要操作整个event对象
    const { offsetX, offsetY, button } = event;
    console.log("鼠标位置", { offsetX, offsetY }, "按键", button);
  });
  

• 调试阶段如果需要查看事件的多个属性，手动提取需要的字段组成普通Plain Object后再打印，避免触发沙箱代理的全量遍历逻辑。
• 非CodeSandbox的本地原生开发环境如果也出现直接打印event崩溃的问题，优先排查是否引入了全局代理DOM事件的第三方库、或自定义沙箱脚本，正常浏览器环境下直接打印事件对象不会触发崩溃，仅会在控制台展开时显示完整的事件属性列表。

内容的提问来源于stack exchange，提问作者The code painter