Stringifying event object works, but is practically empty

Question

I have this custom stringify function which can handle circular references:

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;
  });
};

but if I use it to stringify an event object:

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

v is just string that looks like this:

{"isTrusted":true}

so bizarre. I tried a few other custom stringifying helper functions, and they all give me the same result.

I looked at this thread: How to stringify event object?

but my problem seems more specific.

I also looked to see if the MouseEvent has a toJSON method somewhere in the prototype chain, and I didn't see one — user5047085
– user5047085, Commented Jan 2, 2018 at 2:33
What are you hoping to accomplish by doing this? Or are you just curious? — Nick Tomlin
– Nick Tomlin, Commented Jan 2, 2018 at 2:42
my goal is to pass event data between threads on the front-end (message passing) — user5047085
– user5047085, Commented Jan 2, 2018 at 4:48

AuxTaco · Accepted Answer · 2018-01-02 03:00:02Z

3

JSON.stringify ignores non-enumerable properties, and most of the properties of a MouseEvent are (apparently) non-enumerable:

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>

You can call each property out by name and make it enumerable before handing the event off to 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>

edited Jan 2, 2018 at 3:00

answered Jan 2, 2018 at 2:53

AuxTaco

5,2011 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Stringifying event object works, but is practically empty

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related