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.
Есть ли какая-нибудь библиотека/код, готовый для ее использования?
Вы не сможете сериализовать объект события с помощью JSON.stringify, потому что объект события содержит ссылки на узлы DOM, а DOM имеет круговые ссылки повсюду (например, отношения ребенок/родитель). JSON не может справиться с этим по умолчанию, так что вам немного не повезло.
Я бы посоветовал взглянуть на как сериализовать узел DOM в JSON, даже если есть циклические ссылки?, в котором есть несколько советов о том, как сериализовать узел DOM. Кроме того, следующие вопросы содержат полезную информацию:
Библиотеки JSON, способные обрабатывать циклические ссылки, кажутся
Кроме того, вы можете удалить все ссылки на узлы DOM, если они вам не нужны, и затем сериализовать объект. В конце концов вам не следует этого делать. Смотрите комментарий @PointedEars :)
Используйте функцию "замена", чтобы избежать ошибок:
JSON.stringify(evt, function(k, v) {
if (v instanceof Node) {
return 'Node';
}
if (v instanceof Window) {
return 'Window';
}
return v;
}, ' ');
Обновление 2019: API-интерфейс браузера несколько изменился, вот метод, позволяющий выставить все доступные ключи в цепочке прототипов Event
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;
}, ' ');
}
Не уверен, что это помогает, но я просто наткнулся на это в документации 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));
У меня была аналогичная проблема, и я написал простой сериализатор событий со вспомогательным методом для очистки атрибута пути события. Подход для этого решения для преобразования данных из события в сериализуемый объект:
// Calculate a string representation of a node 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>Улучшенная версия кода, предоставленная Александром Шутау, поскольку она обрабатывает многоуровневые объекты (ES6):
function stringify_object(object, depth=0, max_depth=2) {
// change max_depth to see more levels, for a touch event, 2 is good
if (depth > max_depth)
return 'Object';
const obj = {};
for (let key in object) {
let value = object[key];
if (value instanceof Node)
// specify which properties you want to see from the node
value = {id: value.id};
else if (value instanceof Window)
value = 'Window';
else if (value instanceof Object)
value = stringify_object(value, depth+1, max_depth);
obj[key] = value;
}
return depth? obj: JSON.stringify(obj);
}
Просто назови это так:
stringify_object(event, 2);
Например, на сенсорном событии я получаю следующее:
touchstart : {"isTrusted":true,"touches":{"0":{"identifier":0,"target":{"id":"screen"},"screenX":548,"screenY":281.5,"clientX":498.1817932128906,"clientY":185.90908813476562,"pageX":498.1817932128906,"pageY":185.90908813476562,"radiusX":29.77272605895996,"radiusY":27.954544067382812,"rotationAngle":0,"force":0.5},"length":1,"item":{}},"targetTouches":{"0":{"identifier":0,"target":{"id":"screen"},"screenX":548,"screenY":281.5,"clientX":498.1817932128906,"clientY":185.90908813476562,"pageX":498.1817932128906,"pageY":185.90908813476562,"radiusX":29.77272605895996,"radiusY":27.954544067382812,"rotationAngle":0,"force":0.5},"length":1,"item":{}},"changedTouches":{"0":{"identifier":0,"target":{"id":"screen"},"screenX":548,"screenY":281.5,"clientX":498.1817932128906,"clientY":185.90908813476562,"pageX":498.1817932128906,"pageY":185.90908813476562,"radiusX":29.77272605895996,"radiusY":27.954544067382812,"rotationAngle":0,"force":0.5},"length":1,"item":{}},"altKey":false,"metaKey":false,"ctrlKey":false,"shiftKey":false,"view":"Window","detail":0,"sourceCapabilities":{"firesTouchEvents":true},"which":0,"initUIEvent":{},"NONE":0,"CAPTURING_PHASE":1,"AT_TARGET":2,"BUBBLING_PHASE":3,"type":"touchstart","target":{"id":"screen"},"currentTarget":{"id":"screen"},"eventPhase":2,"bubbles":true,"cancelable":true,"defaultPrevented":false,"composed":true,"timeStamp":192516.7899999651,"srcElement":{"id":"screen"},"returnValue":true,"cancelBubble":false,"path":{"0":{"id":"screen"},"1":{"id":"back"},"2":{"id":""},"3":{"id":""},"4":{},"5":"Window"},"composedPath":{},"stopPropagation":{},"stopImmediatePropagation":{},"preventDefault":{},"initEvent":{}}
Таким образом, проблема заключается в том, что JSON.stringify выручает, как только находит циклическую ссылку. В любом случае я не был заинтересован в свойствах с круговой ссылкой. То, как я получил остальные из них
var str = "{"
for (var key in data) {
if (JSON.stringify(data[key]) !== "") {
str += key + ":" + data[key]) + ",";
}
}
str += "}"
Это в основном даст вам остальные свойства. Чтобы избежать ошибок JS, вы можете поместить их в try/catch.
Просто используйте JSON.stringify (событие) и данные события должны быть преобразованы в строку.