如何识别Fabricjs Canvas画布区域外的点击事件？

问题核心 #

直接给画布父级div绑定取消选中的回调，会因为DOM事件冒泡机制，导致画布内部的点击事件向上冒泡到父div，触发误执行。

实现逻辑 #

• 把点击监听绑定到document上，保证所有区域的点击都能被捕获
• 每次点击触发时，判断当前点击的DOM节点是否属于Fabric画布的容器范围
• 仅当点击落点在画布范围外时，才执行取消选中、重绘画布的逻辑
• 无需手动计算点击坐标，用原生DOM的contains方法即可完成范围判断，自动兼容页面滚动、画布缩放、布局偏移的场景

可直接复用的代码 #

// 替换成你项目里已经初始化好的Fabric画布实例
const fabricCanvas = new fabric.Canvas('yourCanvasDomId')
// 获取Fabric画布对应的外层DOM容器
const canvasContainer = fabricCanvas.wrapperEl

// 绑定全局鼠标按下事件，和Fabric内部选中逻辑的触发时机保持一致
document.addEventListener('mousedown', (e) => {
  // 判断点击目标是否在画布容器内部
  const clickInCanvas = canvasContainer.contains(e.target)
  if (!clickInCanvas) {
    // 点击在画布外时才执行取消选中
    fabricCanvas.discardActiveObject()
    fabricCanvas.renderAll()
  }
})

// 如果你用的是Vue/React等框架，记得在组件卸载时移除上面绑定的document事件，避免内存泄漏

常见避坑点 #

• 不要只给画布的直接父元素绑定事件：如果父元素的布局范围大于画布本身，点击父元素内、画布外的区域会出现判断偏差
• 不要依赖Fabric实例自带的鼠标事件：Fabric的mouse:down/mouse:up等事件仅在点击画布内部时触发，无法监听到画布外的点击行为
• 如果页面存在弹窗、工具栏等点击后不需要取消画布选中的元素，可以给这类元素加统一标记类，在判断逻辑里额外跳过即可

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