javascript - 是否可以创建自定义事件变量并通过 click() 传递它？

Question

目前我正在开发一款游戏。

当您手动点击特定对象时，粒子会通过使用 event.clientX 和 event.clientY 飞出您点击它的地方。

我正在实现一项功能，您可以在其中创建“ worker ”并将它们设置在特定的 x、y 坐标处，每隔几秒就会点击一次。

目前我正在做这样的事情:

let el = document.elementFromPoint( x, y )
el.click()

但缺点是它没有像普通点击事件那样附加一个包含 x 和 y 坐标的事件。有什么方法可以传递吗？

编辑:

假设每当您点击 div.square 时，粒子就会出现。

我在 div.square 上有一个点击事件监听器，看起来像这样:

square.onclick = ( event ) => {
  create_particles( event )
}

如果我通过 click() 模拟点击，square.onclick 将触发，但 event 参数将为空。有没有办法以某种方式传递这些坐标？

Answer 1

也许您可以创建一个事件对象，用 clientX 和 clientY 的必要值填充它，然后将该对象传递给 create_particles().

所以，大致是这样的:

// let el = document.elementFromPoint( x, y )
// el.click()

// Create an event object, and populate clientX/clientY fields with x/y
var event = new MouseEvent('click', {
    clientX: x,
    clientY: y
});

// Invoke create_particles with your event object
create_particles( event )

或者，您可以在注册了 click 监听器的 DOM 元素上调度 事件，以触发它的 click 事件逻辑，方法是这个:

var event = new MouseEvent('click', {
    clientX: x,
    clientY: y
});

// Cause the 'click' event to be invoked on the square DOM element
square.dispatchEvent(event);