Canvas应用中Overlay点击事件委托至Canvas的模拟点击失败排查

我有一个无内置zoom&pan功能的Canvas应用，通过在Canvas上方设置pointer-events:all、opacity:0的Overlay实现缩放平移操作。现在需要将Overlay上的点击事件委托到Canvas，我的思路是获取触摸点击的坐标，先将Overlay设为pointer-events:none，再模拟touchstart事件，但该方案无法生效，相关代码如下：

$(document).on('touchstart', function (event) {
  showCoordinates(event);
});

function showCoordinates(event) {
  var x = event.touches[0].clientX;
  var y = event.touches[0].clientY;
  console.log(x);
  console.log(y);
  $('#overlay').css('pointer-events','none');
  var myEvent = $.Event( "touchstart", { pageX:x, pageY:y } );
  $("body").trigger( myEvent );
  $('#overlay').css('pointer-events','all');
}

其中模拟点击的代码部分在谷歌Chrome控制台中也无法工作，请问我哪里操作出错了？

核心错误点 #

1. 事件目标错误：你给body触发模拟事件，但Canvas的事件监听应该绑定在自身元素上，而非body，导致事件无法被Canvas捕获。
2. 模拟事件结构不完整：jQuery的$.Event无法完整模拟原生触摸事件的touches数组结构，Canvas的原生事件监听无法识别这种简化版事件。
3. pointer-events切换时机问题：快速切换pointer-events的操作会被浏览器事件队列打乱，事件还未处理就恢复Overlay的事件拦截，导致委托失效。

修正后的代码示例 #

// 直接监听Overlay的touchstart事件，避免全局事件干扰
$('#overlay').on('touchstart', function (event) {
  event.preventDefault(); // 阻止默认行为，避免页面滚动等干扰
  const touch = event.touches[0];
  
  // 获取目标Canvas元素
  const canvas = document.querySelector('canvas');
  
  // 创建符合标准的原生触摸事件
  const touchEvent = new TouchEvent('touchstart', {
    touches: [new Touch({
      identifier: Date.now(), // 唯一标识触摸点
      target: canvas,
      clientX: touch.clientX,
      clientY: touch.clientY,
      pageX: touch.pageX,
      pageY: touch.pageY
    })],
    bubbles: true,
    cancelable: true
  });
  
  // 直接给Canvas触发原生触摸事件
  canvas.dispatchEvent(touchEvent);
});

关键优化说明 #

• 直接监听Overlay的事件，避免全局事件的冗余触发和干扰。
• 使用原生TouchEvent和Touch对象模拟事件，完全符合浏览器事件标准，能被Canvas的原生监听正确识别。
• 无需切换pointer-events，通过手动触发Canvas事件的方式直接完成委托，逻辑更可靠。

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