如何在 JavaScript 中定义的 x、y 坐标处模拟点击？ [复制]答案

【问题标题】：How to simulate a click at a defined x, y coordinates in JavaScript? [duplicate]如何在 JavaScript 中定义的 x、y 坐标处模拟点击？ [复制]
【发布时间】：2021-03-11 18:35:27
【问题描述】：

使用事件 api，可以创建合成的 MouseEvent 并通过 DOM 元素以编程方式调度它。

通过在文档中添加事件监听器，可以在冒泡阶段捕获子元素调度的事件。

即：

const element = document.createElement('div')
element.style.background = '#ff0000'
element.style.width = '200px'
element.style.height = '200px'
document.body.appendChild(element)

document.addEventListener('click', event => {
  console.log('Clicked on child element')
  console.log(event)
})

const clickEvent = new MouseEvent('click', {
  bubbles: true,
  cancellable: true,
  clientX: 32,
  clientY: 32,
})

element.dispatchEvent(clickEvent)

是否可以通过编程方式从父元素调度 MouseEvent 或 PointerEvent 并让事件经过捕获阶段并在鼠标事件的坐标下触发子元素的事件侦听器？

【问题讨论】：

您已经知道如何创建和调度人工事件。将事件重新分派给子元素。请记住，如果孩子最初没有捕捉到它，它可能不会再次捕捉到它。
@Ouroborus 问题是，当事件由文档或任何父元素调度时，它不会触发子元素上的事件侦听器，因此它与用户单击时并不完全相同确定的位置。我想可以遍历 DOM 树并手动执行命中测试，但我认为有一种方法可以让浏览器像用户点击一样执行此操作。

标签： javascript html dom

【解决方案1】：

看来我最初的问题没有正确表述。我的错误是假设将事件沿 DOM 树传播的方法是让文档分派它。我的问题应该这样表述：“如何通过在 JavaScript 中使用 x,y 坐标来模拟点击？”。我找到了答案here。

文档上有一个方便的 elementFromPoint 方法，可以返回指定位置下的元素，因此无需遍历 DOM 树并手动对元素执行命中测试。

这里需要做什么：

const simulateClick = (x, y) => {
  const event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true,
    screenX: x,
    screenY: y
  })

  const element = document.elementFromPoint(x, y)
  element.dispatchEvent(event)
}

simulateClick(32, 32)

【讨论】：