如何使用 pageX 和 pageY 模拟 mousemove 事件答案

【问题标题】：How to simulate mousemove event with pageX and pageY如何使用 pageX 和 pageY 模拟 mousemove 事件
【发布时间】：2019-04-28 21:38:44
【问题描述】：

我想模拟鼠标移动事件。设置如下

我有这个元素

<div class="target"></div>

在此测试设置中跟随鼠标：DEMO

我已经模拟了 mousedown 事件（单击按钮）。生成此事件的代码如下所示：

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

source

但是如何创建一个虚假的movemove 事件？因为我还需要为它提供一个 pageX 和 pageY。当我创建如上所示的事件时，如何提供这些信息？

【问题讨论】：

您不能创建将移动鼠标的mousemove 事件。它是只读的。您能否更详细地描述您的最终目标是什么？可能还有其他方法可以实现。
我不想移动鼠标，我只想创建一个 mousemove 事件并调度它，以便执行回调

标签： javascript html

【解决方案1】：

我已更新您的示例代码，以展示如何创建 mousemove 事件。请注意，您的代码使用了已弃用的document.createEvent()，您应该考虑用更新的MouseEvent 替换它，我在添加的代码部分中使用了它。

const target = document.querySelector('.target');

document.querySelector('main')
  .addEventListener('mousemove', (e) => {
    if (e.clientY > 60) {
      target.style.top = (e.clientY - 25) + 'px';
    }
      target.style.left = (e.clientX - 25) + 'px'; 
  });

target.addEventListener('mousedown', () => {
   console.log('mouse down');
})

const butt = document.querySelector('.sim-move');
butt.addEventListener('click', () => {

 let evt = new MouseEvent("mousemove", {
    clientX: 150,
    clientY: 5,
    bubbles: true,
    cancelable: true,
    view: window
  });
  
  let canceled = !target.dispatchEvent(evt);  

});

const butt1 = document.querySelector('.sim-down');
butt1.addEventListener('click', () => {
    triggerMouseEvent(target, 'mousedown');
});
function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

html, body, main {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  margin: 20px;
  }

main {
  display: block;
  border: 1px solid #000;
  height: calc(100% - 42px);
}

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: green;
}

<button class="sim-move">Simulate mousemove</button>
<button class="sim-down">Simulate mousedown</button>
<main>
  <div class='target'></div>
</main>

【讨论】：