為什么這個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");
});

這會在收件箱頁面上以及任何消息和其他頁面的內部顯示該消息。