字符串化事件对象有效，但实际上是空的

Question

我有这个自定义的stringify函数，可以处理循环引用：

const customStringify = function (v) {
  return JSON.stringify(v, function(k, v) {
    if (v instanceof Node) {
      return 'Node';
    }
    if (v instanceof Window) {
      return 'Window';
    }
    return v;
  });
};

但是，如果我使用它来对事件对象进行字符串化处理：

  window.addEventListener('click', function (ev) {   // MouseEvent
    const v = customStringify(ev);  // {"isTrusted":true}
  });

v只是看起来像这样的字符串：

{"isTrusted":true}

好奇怪 我尝试了其他一些自定义字符串化辅助函数，它们都给我相同的结果。

我看着这个线程： 如何对事件对象进行字符串化处理？

但我的问题似乎更具体。

Answer 1

JSON.stringify忽略不可枚举的属性，并且 a 的大多数属性MouseEvent（显然）是不可枚举的：

document.querySelector('button').addEventListener('click', ev => {
  let props = ['isTrusted', 'target', 'clientX', 'clientY', 'layerX', 'layerY'];
  props.forEach(prop => {
    console.log(prop + '?', ev.propertyIsEnumerable(prop));
  });
});

<button>Try it!</button>

您可以按名称调用每个属性并使其可枚举，然后再将事件传递给JSON.stringify：

document.querySelector('button').addEventListener('click', ev => {
  let props = ['target', 'clientX', 'clientY', 'layerX', 'layerY'];
  props.forEach(prop => {
    Object.defineProperty(ev, prop, {
      value: ev[prop],
      enumerable: true,
      configurable: true
    });
  });
  console.log(JSON.stringify(ev));
});

<button>Try it again!</button>