网页模拟点击问题：点击任意区域触发指定DIV内图片点击

两种方案的错误点 #

第一种方案的问题 #

这种方案靠计算点击坐标的偏移量来找元素触发点击，完全绑定元素的位置参数，一旦页面布局变动（比如窗口缩放、元素位置调整），偏移后的坐标要么找不到目标元素，要么误选中其他元素，甚至直接报错。而且从需求来说，我们本来就不需要通过坐标间接触发，逻辑方向从一开始就错了。

第二种方案的问题 #

1. 代码没有绑定document的点击监听，只是页面加载时执行一次，根本不会响应用户后续的点击操作；
2. 最后把模拟的点击事件派发给了document，而不是目标图片或它的父级链接元素，等于触发了一个完全无效的事件。

正确实现方式 #

完全不需要依赖坐标，直接监听页面任意位置的点击，然后精准找到指定DIV内的目标元素，直接触发它的点击事件即可，代码简单且稳定：

<a href="https://www.stackoverflow.com">Test Click </a>
<div id="my-element"> 
  <a href="https://www.example.com"> 
    <img src ="https://place-hold.it/300x300"/> 
  </a>
</div>

<script>
// 监听整个页面的点击事件
document.addEventListener('click', function() {
  // 找到指定DIV内的图片（或直接找父级a标签，看实际需要触发的对象）
  const targetElement = document.querySelector('#my-element img');
  // 如果要触发链接跳转，也可以选a标签：const targetElement = document.querySelector('#my-element a');
  
  if (targetElement) {
    // 创建标准的点击事件
    const clickEvent = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true
    });
    // 直接触发目标元素的点击
    targetElement.dispatchEvent(clickEvent);
  }
});
</script>

补充优化 #

如果担心点击目标元素本身时出现重复触发的情况，可以加个判断排除：

document.addEventListener('click', function(event) {
  const targetElement = document.querySelector('#my-element img');
  // 只有点击的不是目标元素及其子元素时，才触发
  if (targetElement && !targetElement.contains(event.target)) {
    const clickEvent = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true
    });
    targetElement.dispatchEvent(clickEvent);
  }
});

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