为什么这个JQuery事件不会在gmail中触发？

Question

我在将Jquery事件绑定到gmail'body'时遇到问题

$('body').on('click', function(event) {
        console.log("Entered function");
});

访问IMDB.com（例如）和谷歌Chrome开发者控制台粘贴上面的代码。 单击该页面时，您可以在控制台上看到“已输入的功能”。

但是，当我尝试使用gmail进行相同操作时，收到以下消息：

TypeError: Object #<HTMLBodyElement> has no method 'on'

gmail发生了什么，我该如何解决这个问题？

编辑： -

非JQuery版本：

document.addEventListener("click", function() {
   console.log("Entered function");
}, false);

就像评论者指出的那样，JQuery没有加载Gmail，这里是一个非JQuery版本，它可以在你点击gmail时工作，但当你点击一个链接（打开一个包含其中一些链接的电子邮件）时它不会工作了。

Answer 1

大多数DOM事件（包括click事件）都按如下方式分派：

1. 捕获阶段（从document （从^{window ， document ， document.documentElement ，...）}向下到树中的单击元素。
2. 气泡阶段（从树上的点击元素到document ^{......， window} ）。

与jQuery绑定的事件总是在＃2处触发，处于冒泡阶段。 Gmail似乎绑定了一个事件添加捕获阶段，并调用event.stopPropagation(); 当用户点击<a>元素时。 该方法停止了事件的传播，因此jQuery将永远不会知道该事件，因为永远不会发生＃2。

因此，删除jQuery并使用普通JavaScript绑定事件：

document.addEventListener('click', function(event) {
    // Do whatever you want
}, true);

通过将addEventListener的第三个参数设置为true ，将在捕获阶段触发侦听器。

---

关于jQuery错误（来自问题）：
Gmail不会加载jQuery，因此您无法使用它。 通常，您将获得ReferenceError：“未定义$”。 相反，你看到“TypeError：Object＃在''上没有方法'，因为当页面没有声明$时， $被定义为Chrome开发者工具中document.querySelector的简写。

如果您在扩展中包含jQuery，则可以通过切换到适当的上下文来使用它。 有关更多详细信息，请参阅为什么jQuery无法在Facebook中加载？

Answer 2

我戳了一下正在加载的gmail，看来gmail并没有加载jquery。

Answer 3

并非所有网站都使用jQuery。 如果您想要访问特定的jQuery库版本，则需要加载该版本，以便在扩展中访问它。

Answer 4

所以我测试了它，它工作得很好。 就像我在评论中说的那样，在任何情况下都需要自己注入jQuery。 您无法访问页面的javascript，也不能访问其他扩展名的任何javascript。 一些示例代码：

的manifest.json

{
  "name": "Gmail jQuery Test",
  "version": "0.1",
  "description": "Gmail jQuery Test",
  "manifest_version": 2,
  "permissions": [
    "https://mail.google.com/*"
  ],
  "content_scripts": [{
    "matches": ["https://mail.google.com/*"],
    "js": ["jquery.js", "script.js"],
    "all_frames": true
  }]
}

的script.js

$('body').on('click', function(event) {
  console.log("Entered function");
});

这会在收件箱页面上以及任何消息和其他页面的内部显示该消息。