当console.dir仅输出“ [object Object]”时，如何调试IE10中的MSPointer事件？

Question

我花了一些时间调试IE10中的new event object model。由于Microsoft更改了事件模型，因此绑定到“ touchstart”的代码在遇到event.originalEvent.touches[0].target时将引发错误。好的。但是我无法检查其新MSPointer事件对象的属性以使其正常工作：出于某种原因，IE10仅从[object Object]输出console.log，从"[object Object]"输出console.dir。

为什么？ （有人知道吗？）

我听说console.log（JSON.stringify（obj））输出属性，并且它确实可以-除了事件对象，因为它们实际上是函数。太好了！

这是我的问题的症结所在：是否有人在为触摸事件绑定MSPointerDown时如何调试事件属性的提示？我是否需要启用某个设置才能使其记录有用的信息？

这里有一些示例代码：

$('body').bind( ( window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart" ), function (event) {
        console.dir(event);
        // outputs "[object Object]" in IE10
 });

注意：我也从书签中尝试了Firebug Lite，但不允许从远程VM输出脚本。

Answer 1

http://jsfiddle.net/V28zY/3/

JSFiddle代码：

function ownKeys(obj) {

    var o = {};
    for (var key in obj) {
        o[key] = true;
    }
    try {
        Object.getOwnPropertyNames(obj).forEach(function (k) {
            o[k] = true;
        });
    } catch (e) {}
    var ret = [];
    for (var key in o) {
        ret.push(key);
    }
    return ret;
}

function logObject(obj, indent, seen) {
    var seen = seen || [];
    var indent = indent || 0;

    ownKeys(obj).slice(0, 50).sort().forEach(function (key) {
        var value = obj[key];


        if (Object(value) === value) {
            if (typeof value === "function") {
                console.log(Array(indent * 4 + 1).join(" ") + key, " = ", "[Function]");
            } else if (value.appendChild) {
                console.log(Array(indent * 4 + 1).join(" ") + key, " = ", "[DOMNode]");

            } else if (seen.indexOf(value) === -1 && value !== obj && value !== window) {
                console.log(Array(indent * 4 + 1).join(" ") + key + ":");
                seen.push(value);
                logObject(value, indent + 1, seen);
            } else {
                console.log(Array(indent * 4 + 1).join(" ") + key, " = ", "[Recursion]");
            }
        } else {
            console.log(Array(indent * 4 + 1).join(" ") + key, " = ", JSON.stringify(value));
        }
    });
}

$('body').bind((window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart"), function (event) {
    logObject(event);
});

Answer 2

$('body').bind( ( window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart" ), function (event) {
    debugger;
});

然后在F12开发人员工具中打开页面，转到“脚本”选项卡，然后单击“开始调试”。与页面进行交互以触发事件处理程序。该代码应在您的断点处停止；转到“本地”标签并开始检查。从这里，我可以看到事件对象中的所有属性。这是愚蠢的，但这是我弄清楚事情的方式。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9Hc1dJQS5wbmcifQ==” alt =“在此处输入图像描述”>