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

问题描述

  $（'body'）。on（） 'click'，function（event）{
 console.log（Entered function）; 
}）; 
  

在上面的代码中访问IMDB.com（例如）和Google Chrome开发者控制台粘贴。当您点击页面时，您可以在控制台上看到输入的功能。

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

  TypeError：Object＃< HTMLBodyElement>没有方法'on'
  

gmail是怎么回事，我该如何解决这个问题？

编辑： -

非JQuery版本：

  document.addEventListener（click，function（）{
 console.log（Entered function）; 
}，false）; 
  

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

解决方案

大多数DOM事件，包括点击事件都是按如下方式分派的：

1. 捕获阶段（来自文档 ^{（窗口，文档， document.documentElement ，...）}将树拖放到单击的元素上。


2. 泡泡阶段（从树上的单击元素到文档 ^...，窗口

在jbQuery中绑定的事件总是在冒泡阶段在＃2中触发。 Gmail似乎绑定了一个事件添加捕获阶段，并在用户点击< a> event.stopPropagation（）; $ c>元素。这个方法阻止了事件的传播，所以jQuery永远不会知道这个事件，因为＃2永远不会发生。



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

$ p $ document.addEventListener（'click'，function（event）{
//做任何你想做的事
}，true）;


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



---

关于jQuery错误（来自问题）：

Gmail无法加载jQuery，因此您无法使用它。通常，你会得到ReferenceError：$未定义。因为 $ 被定义为 document.querySelector 't声明 $ 。

如果你在扩展中包含了jQuery，可以通过切换到合适的上下文。有关更多详细信息，请参阅为什么jQuery不会在Facebook中加载？

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

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

Visit IMDB.com (for eg) 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.

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

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

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

EDIT :-

Non JQuery Version:

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

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.

解决方案

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

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}).

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.

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

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

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

---

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 $.

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屋！