jQuery mouseenter 多次启动？

Question

我正在测试 youtube 的 chrome 扩展，但我遇到了一个问题，即 mouseenter 被多次启动。

这是我在缩略图上的简单鼠标输入：

$( "body" ).on('mouseenter', '#thumbnail', function() {
    console.log('click');
});

现在，一旦页面加载并且我将鼠标悬停在任何缩略图上，它只会被触发一次，并且每次操作都会在控制台内显示一次点击文本。

当我浏览到不同的 youtube 部分时，问题就开始了，比如说 - 趋势。现在，如果我再次将鼠标悬停在趋势页面中的缩略图上，则单击文本将在控制台中每个单个操作出现 3 次。如果我再次浏览回主页，每次悬停操作时，它的输出会增加一倍或三倍。

我尝试过 .off 方法，但没有任何区别。问题可能出在哪里？

这是我将 jquery 和函数 js 加载到网站的 js：

chrome.tabs.onUpdated.addListener(function (tabId , info) {
  if (info.status === 'complete') {
    chrome.tabs.executeScript({
        file: 'jquery-3.2.1.min.js'
    });
    chrome.tabs.executeScript({
        file: 'payload.js'
    });
  }
});

会不会是每次youtube网站在里面加载不同的页面时都会加载executeScript？

Answer 1

仅当页面内容动态更改时，您才需要 .off。如果更改的内容具有您限定的相同元素（例如相同的 id） - 取决于您的 onContentChange 事件 - 该内容上有两个不同的 .on 事件。因此，例如当您动态更改内容时，您必须在更改内容之前运行 .off。否则你会遇到问题。 一个典型的问题是当您使用 ajax 加载内容并分配一些 .on 事件但从未运行 .off 时。

对于您的问题，您是否尝试过在 addListener 中使用简单的 console.log 来检查您是否多次执行脚本？

Answer 2

好的，看来问题出在我的清单上。我多次更改了清单，但这次由于某种原因有效。

我删除了 payload.js 中的 executeScript 函数并从清单中加载了内容脚本：

 "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jquery-3.2.1.min.js","payload.js"]
    }
  ],

现在它就像一个魅力..