React Canvas绘图应用：按下字母键后MouseDown事件无法立即捕获

核心解决方案 #

• 给canvas元素添加tabindex="0"属性，使其具备可聚焦能力
• 在onMouseDown事件处理器中重新触发canvas的聚焦操作，避免焦点丢失
• （可选）通过CSS移除canvas的聚焦轮廓，避免视觉干扰

问题根源 #

canvas元素默认不支持聚焦状态，你在useEffect中调用的el.focus()实际无法持久生效。当按下字母键时，浏览器会自动将焦点转移到文档或其他可交互元素，导致后续点击canvas时，浏览器需要额外处理焦点切换流程，从而引发MouseDown事件的延迟捕获。

修改后的完整代码 #

const DrawingCanvas = () => {
  const canvasRef = useRef();

  const onMouseDown = (e) => {
    // 每次点击canvas时重新聚焦，确保事件处理优先级
    canvasRef.current.focus();
    // 你的原有MouseDown逻辑
    // ...
  };

  useEffect(() => {
    const el = canvasRef.current;
    el.focus();
    el.height = window.innerHeight;
    el.width = window.innerWidth;
    el.style.cursor = 'crosshair';
    canvas.el = el;
    canvas.ctx = el.getContext('2d');
    window.addEventListener('keydown', onKeyDown);
    window.addEventListener('keyup', onKeyUp);
    window.addEventListener('resize', onResize);
    
    return () => {
      window.removeEventListener('keydown', onKeyDown);
      window.removeEventListener('keyup', onKeyUp);
      window.removeEventListener('resize', onResize);
    }
  }, []);

  return (
    <div className='root-canvas'>
      <canvas
        className='drawing-canvas position-absolute'
        onMouseMove={onMouseMove}
        onMouseDown={onMouseDown}
        onMouseUp={onMouseUp}
        ref={canvasRef}
        tabindex="0" // 添加可聚焦属性
      />
    </div>
  )
}

可选CSS优化 #

.drawing-canvas:focus {
  outline: none; /* 移除聚焦时的默认轮廓线 */
}

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