调试通过 jQuery 添加到元素的事件处理程序答案

【问题标题】：Debugging event handlers added to an element via jQuery调试通过 jQuery 添加到元素的事件处理程序
【发布时间】：2012-07-23 06:49:29
【问题描述】：

我正在尝试调试一些复杂的代码，其中一些 UI 是在 iPhone phonegap 应用程序中创建的。

问题在于，似乎当我按下元素时，附加到其touchstart 事件的事件处理程序（据说是）不会触发。

要么由于某些原因这些事件没有真正附加，要么点击在以某种方式到达它们之前被阻止......

我正在尝试调试这种情况并想知道：

给定一个 jQuery 对象，是否有一种方法可以列出附加到它的事件处理程序（通过 jQuery）以进行调试？
有没有一种简单的方法可以覆盖.on 并让console.log 成为它的参数
关于如何处理此类问题的任何其他想法

更新：在验证该元素确实具有 touchstart 处理程序并且没有被调用后，我发现如果我添加 click 或 mousedown 事件处理程序，它们确实会被调用。

我怀疑这部分是由 jQuery mobile 引起的，但我不确定它如何或为什么以及为什么它只影响我的部分控件（那些不是 JQM 控件...）。

【问题讨论】：

您可以使用$("#id").data("events");获取所有事件处理程序
@thomas，这是一个非常好的指针。它允许我验证 touchstart 事件的事件处理程序确实附加到我的元素。但是，当我按下设备屏幕上的元素时，它仍然没有被调用。关于我现在应该去哪里的任何想法？
@thomas，你知道这是否可以表示为选择器吗？即选择有事件的元素？
不知道，但搜索了 10 秒后：stackoverflow.com/questions/2891452/jquery-data-selector

标签： jquery iphone cordova jquery-mobile jquery-events

【解决方案1】：

This Chrome extension 列出附加的 JQuery 事件。

【讨论】：

这在其他情况下可能会有所帮助。但是它对我没有帮助，因为我的调试是通过 phonegap 远程调试控制台（winere）完成的。

【解决方案2】：

How do you log all events fired by an element in jQuery?

function getEventsList($obj) {
    var ev = new Array(),
        $events = $obj.data('events');
    for(var i in $events) {
        ev.push(i);
    }
    return ev.join(' ');
}

$obj.on(getEventsList($obj), function(e) {
    console.log(e);
});

我用它来找出 jquery 插件绑定到元素的确切自定义事件。它获取所有附加的事件，并在事件被触发时调用 console.log。

【讨论】：