为什么这个 jQuery 事件不在 gmail 中触发? [英] Why doesn't this jQuery event to fire in gmail?

问题描述

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

I am having problem with binding a jQuery event to gmail 'body'

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

访问 IMDB.com(例如)并在 Google Chrome 开发者控制台中粘贴上述代码.当您点击页面时，您可以看到输入的功能"；打印在控制台上.

Visit IMDB.com (for example) and in Google Chrome developer console paste in the above code. When you click on the page, you can see "Entered function" printed on the console.

但是当我尝试使用 gmail 时，我收到以下消息:

But when I try the same with gmail, I get the following message:

TypeError: Object #<HTMLBodyElement>没有方法'on'

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

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

What is going on with gmail, and how do I work around this?

-

非 JQuery 版本:

Non JQuery Version:

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

就像评论者指出的那样，jQuery 没有加载 Gmail，这是一个非 jQuery 版本，当你点击 gmail 时它可以工作，但是当你点击一个链接时(打开一封包含一些链接的电子邮件)它不再起作用了.

Like the commenters have pointed out, jQuery is not loaded with Gmail, here is a non jQuery version, it works when you click on gmail, but when you click on a link (open an email with some links in them) it doesn't work anymore.

推荐答案

大部分 DOM 事件，包括 click 事件都是这样调度的:

Most DOM events, including the click event are dispatched as follows:

1. 捕获阶段(来自 document^{(window, document, document.documentElement, ...)} 沿着树向下到被点击的元素).
2. 冒泡阶段(从树上被点击的元素到 document ^{..., window}).

1. Capture phase (from document^{(window, document, document.documentElement, ...)} down the tree to the clicked element).
2. Bubble phase (from the clicked element up the tree to document ^{..., window}).

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

Events bound with jQuery are always triggered in #2, at the bubbling phase. Gmail appears to bind an event add capture phase, and calls event.stopPropagation(); when the user clicks on <a> elements. This methods stops the propagation of the event, so jQuery will never know about the event because #2 never occurs.

所以，放弃 jQuery 并使用 vanilla JavaScript 来绑定事件:

So, drop jQuery and use vanilla JavaScript to bind the event:

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

通过设置addEventListener 到 true，监听器在捕获阶段被触发.

By setting the third argument of addEventListener to true, the listener is triggered at capture phase.

关于 jQuery 错误(来自问题):
Gmail 不加载 jQuery，因此您无法使用它.通常，您会得到 ReferenceError: "$ is not defined".相反，您看到了TypeError: Object # has no method 'on'"，因为 $ 被定义为 document.querySelector 页面未声明 $ 时 Chrome 的开发者工具中.

Regarding the jQuery error (from the question):
Gmail doesn't load jQuery, so you cannot use it. Usually, you would get ReferenceError: "$ is not defined". Instead, you saw "TypeError: Object # has no method 'on'", because $ is defined as a shorthand for document.querySelector in Chrome's developer tools when the page doesn't declare $.

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

If you included jQuery with your extension, it can be used by switching to the appropriate context. For more details, see Why will jQuery not load in Facebook?

这篇关于为什么这个 jQuery 事件不在 gmail 中触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！