如何使用JavaScript点击坐标为(x,y)的像素点

document.elementFromPoint(x, y).click() 失效的核心原因是，当目标坐标下没有除根节点（html/body）外的子DOM元素时，elementFromPoint 可能返回null，或是直接返回html/body元素，直接调用click方法要么抛出JS错误，要么无法正确传递坐标参数给绑定在全局的点击监听。

方案1：构造带坐标参数的原生鼠标事件派发 #

这个方案完全模拟真实鼠标点击的事件流，哪怕坐标下没有独立DOM元素也能正常触发绑定在全局、父容器上的点击逻辑，代码实现如下：

/**
 * 模拟点击页面指定坐标
 * @param {number} x 视口x轴坐标（clientX维度）
 * @param {number} y 视口y轴坐标（clientY维度）
 */
function simulateClick(x, y) {
  // 先校验坐标是否在可视区域内，避免elementFromPoint返回null
  if (x < 0 || x > window.innerWidth || y < 0 || y > window.innerHeight) {
    throw new Error('坐标超出当前视口范围，请先滚动页面将目标位置移入可视区');
  }
  // 构造和真实点击参数一致的鼠标事件
  const clickEvt = new MouseEvent('click', {
    clientX: x,
    clientY: y,
    bubbles: true,
    cancelable: true,
    view: window,
    button: 0
  });
  // 获取坐标点对应的最顶层元素，兜底返回html根节点
  const target = document.elementFromPoint(x, y) || document.documentElement;
  target.dispatchEvent(clickEvt);
}

// 调用示例：点击视口坐标(200, 300)
simulateClick(200, 300);

该方案对绑定在document、window、父容器上靠坐标判断触发的点击逻辑完全生效，比如canvas画布的全局点击监听、页面空白处的点击关闭弹窗逻辑都可以正常触发。

方案2：针对Canvas等无内部DOM的容器场景 #

如果你的目标坐标落在canvas这类本身是单个DOM、内部图形靠渲染生成没有对应DOM的元素上，除了用上面的方法派发事件外，如果需要触发canvas内部图形的点击逻辑，需要额外做两步处理：

• 将全局视口坐标转换成canvas内部的相对坐标，扣除canvas的布局偏移、缩放比例影响
• 自行实现命中检测逻辑，判断坐标落在canvas内的哪个图形上，再执行对应图形的点击回调

注意事项 #

• 所有前端JS模拟的点击行为，受浏览器安全策略限制，无法触发跨域iframe内的交互、浏览器原生行为（比如触发链接的下载、输入框的系统级右键菜单等）
• 如果目标坐标不在当前视口范围内，需要先调用window.scrollTo()把目标位置滚动到可视区域，再执行点击逻辑

内容的提问来源于stack exchange，提问作者Shika