每次绘制popover时添加一个元素

Question

当一个元素出现在页面上时，我想编写脚本，将一个元素添加到具有特定id的其他元素中。当用户悬停在其他元素上时，它将添加到文档中。

在业务逻辑方面:当用户在用户名上徘徊时，就会出现一个弹出器。我想在每个出现的弹出框中为孩子添加一个按钮。

我看过this，下面的代码类似于这个构造，而且它可以工作。问题是它只检查一个元素，当它出现时，就结束它的工作。我理解，为了检查每个元素，我应该删除行this.disconnect();。然而，这只会导致网页挂起。

我该怎么做才能让它发挥作用？我做错了什么吗？

// ==UserScript==
// @name         ms_teams_integration
// @match        https://example.com/*
// @version      1.0
// @grant        none
// @run-at       document-start
// @require      https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// ==/UserScript==

var teamsIcon = ""; // icon in svg format here

setMutationHandler(document, '#user-hover-email', function(nodes) {
    this.disconnect();
    nodes.forEach(function(n) {
        var emailLink = n.getElementsByTagName("a").item(0);
        var teamsLink = emailLink.cloneNode(true);
        teamsLink.setAttribute(
            "href", 
            teamsLink.getAttribute("href")
                .replace("mailto:", "https://teams.microsoft.com/l/chat/0/0?users="));
        teamsLink.setAttribute("target", "_blank");
        teamsLink.innerHTML = teamsIcon;
        n.appendChild(teamsLink);
    });
});

Answer 1

它挂起是因为您的代码会导致一个新的突变，这个变异会被一次又一次地检测到。要防止出现这种情况，请检查新元素是否已经添加：

    nodes.forEach(function(n) {
        if (n.__ms_teams_integration) return;
        var emailLink = n.getElementsByTagName("a").item(0);
        // ...............
        // ...............
        n.appendChild(teamsLink);
        n.__ms_teams_integration = true;
    });