Javascript 调试 - 如何中断所有未知的点击事件

Question

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

我检查了同一个 JS 文件的多个包含，但在查看源代码时只出现了一个。我正在直接刷新页面，因此也没有机会从导航中第二次包含 JS 文件。据我所知(而且我很确定)没有多个自定义点击事件绑定(bind)到触发弹出窗口的按钮(可能是 jQuery Mobile 幕后的东西，但不是自定义)。

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

Answer 1

你可以劫持 addEventListener method这将使您可以选择了解事件何时注册，甚至可以对该事件使用react。

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。通过在原型(prototype)上覆盖该方法，可以确保每个 Element 在附加事件监听器时都将使用您的自定义方法。