如何让点击穿透<canvas>触达低z-index的DOM元素？

核心问题 #

有没有可行的方法让点击穿透<canvas>元素，触达z-index更低的DOM元素？

场景说明 #

• 有效场景：关闭canvas的点击功能（按钮#1）时，用户可以与z-index更低的DOM元素交互。
• 待解决场景：需要在保持canvas对象可点击的同时，让canvas空白区域的点击穿透到底层DOM元素。

具体业务场景 #

两个canvas（绘图层、物理引擎层）堆叠在一起，两层都需要交互，希望避免让用户手动关闭上层canvas的点击功能。猜测最坏情况是手动分析点击坐标并触发下层元素的相应事件，这是常规解决方案吗？

解决方案 #

常规方案：利用FabricJS内置方法判断点击目标 #

这是处理此类需求的标准方案，通过FabricJS的API判断点击位置是否落在画布对象上，再决定是否穿透到下层DOM：

1. 监听canvas的点击事件
2. 将浏览器坐标转换为画布内部坐标
3. 遍历画布对象，检查是否有对象包含该点击点
4. 若没有匹配对象，则手动触发下层元素的点击事件

修改按钮#2的逻辑并添加点击处理：

btn_2.addEventListener("click", () => {
  allowCanvasClickThrough = !allowCanvasClickThrough;
  let span = btn_2.querySelector("span");
  span.innerHTML = allowCanvasClickThrough;
});

// 处理canvas点击事件
canvas.on('mouse:down', (e) => {
  if (!allowCanvasClickThrough || !allowCanvasClicks) return;
  
  // 获取画布内的点击坐标
  const pointer = canvas.getPointer(e.e);
  // 检查点击位置是否存在画布对象
  const hitObject = canvas.getObjects().some(obj => obj.containsPoint(pointer));
  
  if (!hitObject) {
    // 临时关闭canvas的指针事件，让底层元素能被选中
    containerEl.style.pointerEvents = 'none';
    // 创建并分发模拟点击事件
    const clickEvent = new MouseEvent('click', {
      clientX: e.e.clientX,
      clientY: e.e.clientY,
      bubbles: true,
      cancelable: true
    });
    document.elementFromPoint(e.e.clientX, e.e.clientY).dispatchEvent(clickEvent);
    // 恢复canvas的指针事件
    containerEl.style.pointerEvents = 'all';
  }
});

附带问题：初始化图形不显示的解决 #

内嵌代码片段中图形不显示，但Codepen正常，主要原因及修复方式：

原因1：DOM加载顺序问题 #

FabricJS初始化时，DOM可能尚未完全渲染完成。将初始化逻辑放在DOMContentLoaded事件中：

document.addEventListener('DOMContentLoaded', () => {
  init();
  drawObjects();
});

原因2：容器尺寸计算时机过早 #

初始化时containerEl.clientWidth/clientHeight可能为0（CSS未完成渲染），可以延迟初始化：

function init() {
  setTimeout(() => {
    canvas = new fabric.Canvas(canvasEl);
    let width = containerEl.clientWidth;
    let height = containerEl.clientHeight;
    canvas.setWidth(width);
    canvas.setHeight(height);
    // 后续初始化代码...
  }, 100);
}

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