JavaScript中如何用HTML链接而非document/window触发mouseover事件？

首先纠正你代码里的一个小问题：document.getElementById('#two') 不需要加 #，这个方法的参数是元素的id属性值，不是CSS选择器，正确写法是 document.getElementById('two')。

接下来分两种场景实现把触发源改成HTML链接：

1. 绑定到单个特定链接 #

如果只需要给某个指定的链接绑定事件，先获取该链接元素，再直接给它添加mouseover监听器：

// 获取目标链接（假设链接的id是"targetLink"）
const targetLink = document.getElementById('targetLink');
// 获取需要操作的cursor元素（修正后的写法）
const cursor = document.getElementById('two');

// 给链接绑定mouseover事件
targetLink.addEventListener('mouseover', () => {
    cursor.blur();
});

2. 绑定到所有HTML链接（标签） #

如果要给页面上所有链接都绑定这个事件，需要先获取所有<a>元素，再遍历绑定：

const cursor = document.getElementById('two');
// 获取所有a标签
const allLinks = document.querySelectorAll('a');

// 遍历每个链接，添加事件监听器
allLinks.forEach(link => {
    link.addEventListener('mouseover', () => {
        cursor.blur();
    });
});

另外，如果你需要在事件里判断触发元素的细节，可以用事件对象e，比如e.target就是当前触发事件的链接元素，示例：

targetLink.addEventListener('mouseover', (e) => {
    console.log('触发事件的链接:', e.target);
    cursor.blur();
});

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