Vue.js事件处理器中访问事件对象异常问题咨询

我之前也碰到过一模一样的情况，给你梳理下背后的原因和对应的解决办法：

为什么JSON.stringify(event)只返回{"isTrusted":true}？ #

原生Event对象的绝大多数属性都是不可枚举的，而JSON.stringify()只会序列化对象自身的可枚举属性。所以你用它转换事件对象时，只能看到isTrusted这类少数可枚举属性，像target、currentTarget这些核心属性都会被忽略。

如果只是想查看事件对象的完整信息，直接用console.log(event)就好——浏览器控制台会展示对象的所有属性（包括不可枚举的），不用费劲去序列化。

为什么event.target.tagName返回空字符串？ #

最常见的诱因是你在异步回调里访问了事件对象。Vue 2.x出于性能优化的考虑，会在事件回调执行结束后重用事件对象，清空它的所有属性。比如你写了这样的代码：

handler: function(event) {
  setTimeout(() => {
    console.log(event.target.tagName); // 这里会得到空字符串
  }, 100);
}

解决办法很简单，在异步操作前调用event.persist()，它会告诉Vue不要重用这个事件对象，保留所有属性：

handler: function(event) {
  event.persist(); // 关键步骤
  setTimeout(() => {
    console.log(event.target.tagName); // 现在会返回大写的"BUTTON"
  }, 100);
}

要是同步访问还出现这个问题，那你得检查下事件触发时，对应的<button>元素是不是已经被DOM移除了——比如触发事件后组件立刻卸载、或者元素被v-if指令移除，这种情况下event.target指向的是已销毁的元素，属性自然为空。

正确的调试与使用姿势 #

如果只是同步查看事件相关信息，直接这么写就没问题：

handler: function(event) {
  console.log(event); // 控制台展示完整Event对象
  console.log(event.target.tagName); // 同步访问直接得到"BUTTON"
}

内容的提问来源于stack exchange，提问作者hba