如何实现无需特定引用的DOM元素流畅鼠标跟随移动？

你的代码存在两个核心错误，直接导致移动功能异常、不流畅：

• 绑定mousemove事件时，错误地直接执行了move(obj, event)，这会让move函数仅运行一次，而非作为事件回调等待鼠标移动触发。
• 重复调用document.getElementById(obj.id)查询DOM，冗余操作会拖慢性能，且完全没必要——直接使用传入的obj元素对象即可。

修复后的代码 #

function testmove(obj) {
    // 传递回调函数引用，而非立即执行move
    obj.addEventListener('mousemove', function(event) {
        move(obj, event);
    });
}

function move(obj, event) {
    // 直接复用obj元素，避免重复DOM查询
    obj.innerText = `${event.clientX} ${event.clientY}`;
    obj.style.position = 'absolute';
    obj.style.left = `${event.clientX}px`;
    obj.style.top = `${event.clientY}px`;
}

关键优化点 #

1. 事件绑定逻辑修正：通过匿名函数包裹move调用，确保mousemove事件触发时才执行move，并自动传入正确的鼠标事件对象。
2. 减少DOM查询：直接使用传入的obj元素，避免重复查找DOM节点，提升运行效率。
3. 简化字符串拼接：使用模板字符串替代传统拼接方式，代码更简洁易读。

对比你之前的流畅代码，它的核心是正确传递了logmovement函数引用给addEventListener，而你的新代码误将函数执行结果绑定给了事件，这是导致问题的根本原因。

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