为何符合指定条件的链接hover触发模拟点击事件未生效？

问题概述 #

需求为：检查页面所有链接，当鼠标悬停在带有class="open"且文本内容为"Elzero"的链接上时，自动打开该链接。但当前代码运行后，目标链接（页面第二个链接）悬停时并未触发打开操作。

问题原因 #

核心问题是脚本执行时机过早：代码放在<head>标签内，此时浏览器还未渲染<body>中的链接元素，document.links是空集合，循环逻辑根本不会执行，自然无法给目标链接绑定鼠标事件。

解决方案 #

方案1：将脚本移至</body>标签前 #

把脚本放在页面最后、</body>闭合前，此时所有<a>标签已加载完成，可正常获取并绑定事件。同时用this替代document.links[i]，让代码更简洁可靠：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
    <a class="open" href="https://google.com" target="_blank">Google</a>
    <a class="open" href="https://elzero.org" target="_blank">Elzero</a>
    <a class="not" href="https://facebook.com" target="_blank">Facebook</a>
    <a class="linked" href="https://linkedin.com" target="_blank">Elzero</a>

    <script>
        for (let i = 0; i < document.links.length; i++) {
            const link = document.links[i];
            // 增加trim处理文本前后空格的情况
            if (link.classList.contains("open") && link.textContent.trim() === "Elzero") {
                link.onmouseenter = function () {
                    this.click();
                };
            }
        }
    </script>
</body>
</html>

方案2：监听DOM加载完成事件 #

如果不想移动脚本位置，可通过DOMContentLoaded事件确保DOM加载完成后再执行逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            for (let i = 0; i < document.links.length; i++) {
                const link = document.links[i];
                if (link.classList.contains("open") && link.textContent.trim() === "Elzero") {
                    link.onmouseenter = function () {
                        this.click();
                    };
                }
            }
        });
    </script>
</head>
<body>
    <a class="open" href="https://google.com" target="_blank">Google</a>
    <a class="open" href="https://elzero.org" target="_blank">Elzero</a>
    <a class="not" href="https://facebook.com" target="_blank">Facebook</a>
    <a class="linked" href="https://linkedin.com" target="_blank">Elzero</a>
</body>
</html>

额外优化说明 #

• 用link.textContent.trim()处理文本，避免因链接文本前后有空格导致匹配失败
• 将当前循环的链接存入变量link，减少重复DOM查询，提升代码性能
• 事件回调中用this指代触发事件的元素，避免作用域相关的潜在问题

内容的提问来源于stack exchange，提问作者Mohammed