如何在JS中模拟pointerdown事件答案

【问题标题】：How can I simulate pointerdown Event in JS如何在JS中模拟pointerdown事件
【发布时间】：2020-04-01 17:38:01
【问题描述】：

我有一个具有指针向下事件侦听器的 div，我想通过脚本模拟指针向下事件。我该怎么做？

【问题讨论】：

这能回答你的问题吗？ Hold event with javascript
不，这是鼠标按下事件。我想模拟指针向下；
可能重复：stackoverflow.com/q/2705583/104380

【解决方案1】：

您可以阅读 MDN 规范 Creating and triggering events:

// create a specific "pointerdown" event
var event = new PointerEvent('pointerdown')

// Listen for the event (POC)
document.body.addEventListener('pointerdown', console.log);

// Dispatch the event (on the "<body>" element)
document.body.dispatchEvent(event);

如您所见，我正在使用 PointerEvent 构造函数，也可以通过谷歌搜索 MDN 页面的事件轻松获得。

不同的事件有不同的构造函数，你需要看看哪个有构造函数，如果没有，你应该使用CustomEvent构造函数。

您可能遇到的任何与 DOM 相关的问题中，可能有 99% 的问题已经在 MDN 文档中得到解答，您只需将这些部分连接在一起即可。

【讨论】：

当我想创建新事件但我想分派现有事件时，您的解决方案可用，因此我无法获取该事件并分派它。 div 有 pointerdown 事件侦听器，我想单击图像来模拟该 div 的 pointerDown 事件。
@Shayan - 您首先必须创建一个事件才能调度它。没有“现有”事件。是什么阻止您使用我的答案？确切在什么方面没有帮助？

【解决方案2】：

试试这样的：

const el = document.querySelector('#my-element');

el.addEventListener('pointerdown', (event) => {
  console.log('Pointer down event');
});

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

button.addEventListener('click', () => {
  el.dispatchEvent(new PointerEvent("pointerdown"));
});

<div id="my-element">Hello world</div>
<button type="button">Simulate event</button>

供参考，MDN has documentation on simulating events。

【讨论】：