如何取消Canvas焦点以让鼠标点击下方可见元素？

你用的focus()方法本来就和点击事件捕获无关——它只是控制元素焦点状态的显示逻辑，完全不影响鼠标事件的处理。要实现点击透明Canvas时穿透到下方元素，直接用CSS的pointer-events属性就能解决：

• 给Canvas元素设置pointer-events: none;，此时Canvas会完全忽略所有鼠标事件，点击操作会直接落到下方的可见元素上。
• 如果需要Canvas的非透明区域能响应点击，透明区域仍允许穿透，可以结合像素检测实现：先给Canvas设置pointer-events: auto;，然后在点击事件中判断点击位置的像素透明度，再决定是否处理Canvas的点击逻辑。

代码示例 #

完全穿透的简单实现

canvas {
  pointer-events: none;
}

非透明区域响应点击的实现

myCanvas.addEventListener('click', (e) => {
  const rect = myCanvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const ctx = myCanvas.getContext('2d');
  const pixelAlpha = ctx.getImageData(x, y, 1, 1).data[3];
  
  // 仅当点击位置像素不透明时，处理Canvas的点击逻辑
  if (pixelAlpha > 0) {
    console.log('触发Canvas非透明区域的点击');
    // 这里添加你的Canvas点击处理代码
  }
  // 透明区域不做处理，事件会自然穿透到下方元素
});

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