web-dev-qa-db-ja.com

イベントオブジェクトを文字列化する方法は？

JSON.stringify(eventObject);

与える：

_TypeError: Converting circular structure to JSON_

dojox.json.ref.toJson(eventObject);

与える：

_TypeError: Accessing selectionEnd on an input element that cannot have a selection._

それを達成するために使用できるいくつかのライブラリ/コードはありますか？

javascriptjsonserializationstringify
31
Tar

JSON.stringifyを使用してイベントオブジェクトをシリアル化することはできません。これは、イベントオブジェクトにDOMノードへの参照が含まれており、DOMが場所全体に循環参照（子と親の関係など）を持っているためです。 JSONはデフォルトではこれらを処理できないため、少し運が悪いです。

循環参照がある場合でもDOMノードをJSONにシリアル化する方法は？ DOMノードをシリアル化する方法に関するいくつかの提案があります。また、次の質問には役立つ情報があるようです。

循環参照を処理できるJSONライブラリは、

または、不要な場合はDOMノードへの参照をすべて削除し、オブジェクトをシリアル化することもできます。 結局これを行うべきではありません。 @PointedEarsコメントを参照してください:)

17
fresskoma

エラーを回避するには、 "replacer"関数を使用します。

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

2019を更新：ブラウザAPIが何らかの方法で変更されました。ここに、イベントプロトタイプチェーンで使用可能なすべてのキーを公開するメソッドがあります。

function stringifyEvent(e) {
  const obj = {};
  for (let k in e) {
    obj[k] = e[k];
  }
  return JSON.stringify(obj, (k, v) => {
    if (v instanceof Node) return 'Node';
    if (v instanceof Window) return 'Window';
    return v;
  }, ' ');
}
7
Alexander Shutau

それが役立つかどうかはわかりませんが、Angular JSドキュメントでこれを偶然見つけました：

*出典： https://code.angularjs.org/1.5.5/docs/guide/expression#-event-

/*
 * return a copy of an object with only non-object keys
 * we need this to avoid circular references
 */
function simpleKeys (original) {
  return Object.keys(original).reduce(function (obj, key) {
    obj[key] = typeof original[key] === 'object' ? '{ ... }' : original[key];
    return obj;
  }, {});
}

今、あなたは次のようなことをすることができます：

JSON.stringify(simpleKeys(eventObject));
3
bjunix

同様の問題があり、イベントのパス属性をクリーンアップするヘルパーメソッドを備えた単純なイベントシリアライザーを作成しました。このソリューションがデータをイベントからシリアル化可能なオブジェクトに変換するためのアプローチ：

  • プリミティブ属性をコピーする
  • イベントオブジェクトの要素属性のouterHTMLをコピーする
  • Path属性のセレクターパスを計算します（これにより、HTMLページ全体のouterHTMLがコピーされなくなります）。
// Calculate a string representation of a node's DOM path.
var pathToSelector = function(node) {
  if (!node || !node.outerHTML) {
    return null;
  }

  var path;
  while (node.parentElement) {
    var name = node.localName;
    if (!name) break;
    name = name.toLowerCase();
    var parent = node.parentElement;

    var domSiblings = [];

    if (parent.children && parent.children.length > 0) {
      for (var i = 0; i < parent.children.length; i++) {
        var sibling = parent.children[i];
        if (sibling.localName && sibling.localName.toLowerCase) {
          if (sibling.localName.toLowerCase() === name) {
            domSiblings.Push(sibling);
          }
        }
      }
    }

    if (domSiblings.length > 1) {
      name += ':eq(' + domSiblings.indexOf(node) + ')';
    }
    path = name + (path ? '>' + path : '');
    node = parent;
  }

  return path;
};

// Generate a JSON version of the event.
var serializeEvent = function(e) {
  if (e) {
    var o = {
      eventName: e.toString(),
      altKey: e.altKey,
      bubbles: e.bubbles,
      button: e.button,
      buttons: e.buttons,
      cancelBubble: e.cancelBubble,
      cancelable: e.cancelable,
      clientX: e.clientX,
      clientY: e.clientY,
      composed: e.composed,
      ctrlKey: e.ctrlKey,
      currentTarget: e.currentTarget ? e.currentTarget.outerHTML : null,
      defaultPrevented: e.defaultPrevented,
      detail: e.detail,
      eventPhase: e.eventPhase,
      fromElement: e.fromElement ? e.fromElement.outerHTML : null,
      isTrusted: e.isTrusted,
      layerX: e.layerX,
      layerY: e.layerY,
      metaKey: e.metaKey,
      movementX: e.movementX,
      movementY: e.movementY,
      offsetX: e.offsetX,
      offsetY: e.offsetY,
      pageX: e.pageX,
      pageY: e.pageY,
      path: pathToSelector(e.path && e.path.length ? e.path[0] : null),
      relatedTarget: e.relatedTarget ? e.relatedTarget.outerHTML : null,
      returnValue: e.returnValue,
      screenX: e.screenX,
      screenY: e.screenY,
      shiftKey: e.shiftKey,
      sourceCapabilities: e.sourceCapabilities ? e.sourceCapabilities.toString() : null,
      target: e.target ? e.target.outerHTML : null,
      timeStamp: e.timeStamp,
      toElement: e.toElement ? e.toElement.outerHTML : null,
      type: e.type,
      view: e.view ? e.view.toString() : null,
      which: e.which,
      x: e.x,
      y: e.y
    };

    console.log(JSON.stringify(o, null, 2));
  }
};

// Create a mock event for this example
var evt = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  view: window
});
var cb = document.getElementById("clicker");

// Add a click listener
cb.addEventListener("click", serializeEvent);

// Fire the event
cb.dispatchEvent(evt);
<div>
  <button id="clicker" /> JSONify my click!
</div>
2
y3sh