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

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:


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

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?