An HTML Link Element ("a") Refuses to Attach Itself to Event Listener

Question

I am using the MutationObserver observer to check for elements as they are added with my program. One condition being checked is if the element added is an anchor element (tag="a") and then check if the link is a DOI then a contextmenu event listener is attached to it.

This is the code:

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);

This works perfectly well with all the anchor elements that are linked to DOI's that I have tried except the one on this page. What could be the possible reason for this?

Update: The project is a WPF application that has the WebView2 Microsoft Edge browser interface embedded in it. This code is contained in a javascript file that is injected into documents once they are created. I have added the other codes as requested in the comment. Again, the DOI link on the webpage of interest is detected as the if condition part of the code:

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

holds true during debugging, and the only thing that doesn't get successful is the event listener being attached.

Answer 1

This error can result due to a lot of reasons:

• The capitalization of the A when checking the tag.
• Also, since the mutation observer dynamically creates elements, it may not have created the element before the addeventlistener is added. You can use a setTimeout function to delay the addition of the event listener(async).
• You can also check if the element does not have conflicting listeners
• Regular Expressions: Double-check the accuracy of your regular expressions to ensure they correctly match DOI links.
• Use debugger; to pause execution and inspect the element in the browser's developer tools to see if other listeners are attached.
• Hopefully it is a timing issue and the event listener was added before the element was created