HTML 链接元素（“a”）拒绝将自身附加到事件侦听器

Question

我正在使用

MutationObserver

观察器来检查添加到我的程序中的元素。检查的一个条件是添加的元素是否是锚元素 (tag="a")，然后检查链接是否是 DOI，然后将 contextmenu 事件侦听器附加到它。

这是代码：

var doiLinkClicked = function (event) {
    currentDOIElement = event.target
    let jsonObject =
    {
        Key: 'doiContextmenu',
        Value: currentDOIElement.href
    };

    window.chrome.webview.postMessage(jsonObject)
}

const config = { attributes: true, childList: true, subtree: true }

const mutationObserverCallback = (mutationList, observer) => {

                var word_regexp = /^10\.\d{4,9}\/[-._;()\/:a-zA-Z0-9]+$/
                var word_regexp2 = /^https:\/\/doi\.org\/10\.\d{4,9}\/[-._;()\/:a-zA-Z0-9]+$/
                var word_regexp3 = /^DOI: 10\.\d{4,9}\/[-._;()\/:a-zA-Z0-9]+$/
                var word_regexp4 = /^DOI: https:\/\/doi\.org\/10\.\d{4,9}\/[-._;()\/:a-zA-Z0-9]+$/
    for (const mutation of mutationList) {
        if (mutation.type === "childList") {
            var addedNodes = mutation.addedNodes;
            for (var i = 0; i < addedNodes.length; i++) {
                var addedNode = addedNodes[i]
                var tagName = addedNode.tagName

                if (tagName === "A") {
                    let linkAdress = addedNode.href
                    if (linkAdress.includes("https://doi.org/10.")) {
                        console.log(`link: ${linkAdress}`)
                        console.log("A DOI link was found!")
                        addedNode.addEventListener("contextmenu", doiLinkClicked)
                        doiLinksElementsCollection.push(addedNode)
                    }
                }
            }
        } 
    }
};


var observer = new MutationObserver(mutationObserverCallback)

observer.observe(this.document, config);

这与我尝试过的所有链接到 DOI 的锚元素配合得很好，除了此页面上的锚元素。可能的原因是什么？

更新： 该项目是一个 WPF 应用程序，其中嵌入了

WebView2

Microsoft Edge 浏览器界面。该代码包含在一个 javascript 文件中，该文件在创建后会被注入到文档中。我已按照评论中的要求添加了其他代码。同样，感兴趣网页上的 DOI 链接被检测为代码的

if

条件部分：

if (tagName === "A") {
                    let linkAdress = addedNode.href
                    if (linkAdress.includes("https://doi.org/10.")) {
                        console.log(`link: ${linkAdress}`)
                        console.log("A DOI link was found!")
                        addedNode.addEventListener("contextmenu", doiLinkClicked)
                        doiLinksElementsCollection.push(addedNode)
                    }
                }

在调试期间保持 true，唯一不成功的是附加的事件侦听器。

Answer 1

导致此错误的原因有很多：

• 检查标签时A的大写。
• 此外，由于突变观察者动态创建元素，因此在添加 addeventlistener 之前它可能还没有创建元素。您可以使用 setTimeout 函数来延迟添加事件监听器（异步）。
• 您还可以检查元素是否没有冲突的侦听器
• 正则表达式：仔细检查正则表达式的准确性，以确保它们正确匹配 DOI 链接。
• 使用调试器；暂停执行并检查浏览器开发人员工具中的元素以查看是否附加了其他侦听器。
• 希望这是一个计时问题，并且在创建元素之前添加了事件监听器