Javascript调试-如何破解所有未知的点击事件

Question

我有一个jQuery移动项目，为了关闭（大多数）弹出窗口，我注意到我必须在弹出窗口以外的区域单击两次。在这些情况下，第一次点击似乎会从URL地址栏中删除#&ui-state=dialog，而第二次点击实际上会删除弹出窗口。

我已经检查了同一JS文件的多个包含，在查看源代码时只有一个包含。我直接刷新页面，所以也没有机会从导航中再次包含JS文件。据我所知（我很确定），触发弹出窗口的按钮上没有绑定多个自定义点击事件（可能是jQuery Mobile的幕后内容，但不是自定义的）。

有没有一种方法可以让我在调试过程中监听所有点击事件，并查看它们发生了什么？我在打开弹出窗口的自定义JS代码中添加了break，它只执行一次。但还有更多的事情发生，我不知道它是从哪里来的，也不知道如何找到它。

Answer 1

您可以劫持addEventListener方法，该方法可以让您知道事件何时注册，甚至可以对该事件做出反应。

var oldAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(cb) {
  var customCB = function() {
    console.log('Hijacked event handler');
    return cb.apply(this, arguments);
  };
  console.log('Hijacked add event listener');
  return oldAddEventListener.apply(this, arguments);
};

如果您想捕获每个事件，请确保在加载任何其他代码之前先加载此代码。

这是因为Element从EventTarget继承了addEventListener。通过在原型上覆盖该方法，可以确保每个Element在附加事件侦听器时都使用您的自定义方法。