时间戳

首页 > 解决方案 > 如何在 JavaScript 中定义的 x、y 坐标处模拟点击？

javascript - 如何在 JavaScript 中定义的 x、y 坐标处模拟点击？

问题描述

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

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

IE：

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 并使事件经过捕获阶段并在鼠标事件的坐标下触发子元素的事件侦听器？

标签： javascripthtmldom

解决方案

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

文档上有一个方便的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)

推荐阅读