网页上有一个虚拟鼠标

Question

我有一个测试用例，其中我希望用户有 2 个鼠标（1 个是虚拟鼠标），并且每当用户移动 mouse1（原始鼠标）时 mouse2 也应该移动。假设(x,y)是mouse1的坐标，那么mouse2的坐标应该是(x+500px,y)。我尝试这样做

const dummyMouse = document.querySelector('.dummy-mouse')
    document.addEventListener('mousemove', async event => {
        if (dummyMouse) {
            setTimeout(() => {
                const mouseTop = event.clientY
                let mouseLeft = event.clientX + 300

                dummyMouse.style.transform = `translate(${mouseLeft},${mouseTop})`
            }, 100);
        }

    })

其中 dummyMouse 指向一个空 div，其样式为

.dummy-mouse{
    position: fixed;
    height: 120px;
    width: 120px;
    background-color: red;
    border-radius: 50%;
    top: 0;
    left: 0;
    z-index: 3;
}

但是这个解决方案给出了异常结果，例如

1. 有时有效，有时无效
2. 诸如 clientY 未定义之类的错误
3. 虚拟鼠标的可见性间歇性地打开和关闭

所以基本上代码无法正常工作。这是为什么 ？解决方案或替代方案是什么

这是比较两个不同用户的数据的网页，我需要虚拟鼠标

Answer 1

删除

setTimeout

调用，并且不要将事件处理程序标记为

async

。哦，不要忘记

style.transform

期望的是 一个单位，而不仅仅是数字。参见：

const dummyMouse = document.querySelector('.dummy-mouse');
if (dummyMouse) { // <-- moved the if outside, no need for an event listener if the element is not available
  document.addEventListener('mousemove', event => {
    const mouseTop = event.clientY
    const mouseLeft = event.clientX + 300
    dummyMouse.style.transform = `translate(${mouseLeft}px,${mouseTop}px)`; // <-- added px
  });
}

.dummy-mouse{
    position: fixed;
    height: 120px;
    width: 120px;
    background-color: red;
    border-radius: 50%;
    top: 0;
    left: 0;
    z-index: 3;
}

<div class="dummy-mouse"></div>