14

转到 Twitter 的登录页面并在控制台中输入以下内容：

window.addEventListener('keypress', function(e){console.log('hello')}, true)

（注意：第三个参数如何设置为true启用事件捕获。这会导致事件首先被窗口拦截，然后被子元素消费。）

尝试按一些键。请注意如何hello不输出到控制台。添加事件侦听器keydown或keyup不更改任何内容。

hello将在大多数网站上获得输出，但不会在 Twitter 或 Gmail 等网站上获得输出。

为什么？是什么阻止了事件监听器？

编辑：似乎在 Firefox 上按预期工作。但不是铬。为什么 Chrome 没有按预期触发事件侦听器？

编辑 2：正如下面的一些人所推断的，console.log对于 Twitter 和 Gmail 等网站，Chrome 上是一个空功能。这是为什么？

4

5 回答 5

17

因为这些网站已经专门设置（显然是针对 webkit）：

console.log = function(){};

log()但是，在 Chrome 中，您可以通过在控制台中发出以下命令来恢复原始功能：

console.log = console.__proto__.log

然后你可以这样做：

window.addEventListener('keypress', function(e){console.log('hello')}, true)

它应该按预期工作。

于 2012-09-26T23:14:27.343 回答
3

从 iframe 获取它：

function setConsole() {
  var iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  console = iframe.contentWindow.console;
  window.console = console;
}

（然后调用它）

setConsole()

来源：https ://gist.github.com/cowlicks/a3bc662b38c36483b35f74b2b54e37c0

于 2017-10-28T23:58:27.960 回答
2

开发人员喜欢console.log()在他们的代码中添加语句以进行故障排除/调试。有时，他们在签入生产代码时忘记将它们全部取出。一个简单的防范措施是console.log()在生产代码中将其重新定义为一个不执行任何操作的空函数，因此即使开发人员不小心留下了一个，它也不会导致任何输出或console在不运行调试器时没有对象时抛出异常（就像在 IE 中一样）。

一些浏览器可能会通过将其设置为只读以防止以这种方式覆盖该函数来防止替换该函数，但如果他们这样做，则控制台对象必须存在，因此偶尔console.log()声明仍然没有任何危害。这些剩余console.log()语句的主要危害是在 IE 中，它会导致抛出异常，因为console除非正在运行调试器，否则对象不存在。

于 2012-09-26T23:48:38.450 回答
0

这是console.log 的问题。试试这个：

window.addEventListener('keypress', function(e){alert('hello')}, true)
于 2012-09-26T23:27:26.100 回答
0

Firefox 不会出现此问题。

我检查了 Chrome，显然出于某种原因，Gmail 和 Twitter 页面最终将 console.log 重新分配给了一个空函数function () {}，所以你的处理程序被调用但它什么也没做。如果您尝试alert()代替console.log，您会看到它正常工作。

有趣的。

于 2012-09-26T23:27:56.397 回答