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

Question

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

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

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

Answer 1

您可以劫持 addEventListener method，这样您就可以选择知道事件何时注册，甚至可以对该事件作出反应。

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 在附加事件侦听器时都将使用您的自定义方法。

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

Javascript Debugging - How to break on all unknown click events

javascript

debugging

jquery

jquery-mobile

jquery-events