如何实现选中对象后仅交互该对象、阻止其他对象及画布的点击？

之前的方案为啥拦不住空白点击 #

你碰到的问题，核心是之前的拦截层级根本没覆盖到空白事件的触发源头：

• 给其他对象设evented = false，只能挡住对象层的点击响应，管不到Canvas DOM本身绑定的全局鼠标事件，点空白的时候Fabric还是会触发默认的取消选中、状态切换逻辑
• 在对象级的mouse:down回调里调用stopPropagation，根本碰不到空白区域的点击路径——点空白的事件是直接从Canvas DOM触发的，压根不经过被选中对象的事件处理链路
• 直接在全局mouse:down回调里无条件return，很容易误把锁定对象本身需要的缩放、变换、拖动操作也屏蔽掉，没法精准区分哪些事件要放行

完整实现步骤 #

1. 先定义全局状态标记
   提前声明两个变量跟踪模式状态：
   • isLockedToSingleObject：布尔值，标记当前是否处于单对象锁定模式
   • lockedTarget：对象引用，存当前允许交互的那个选中对象
2. 绑定进入锁定模式的触发逻辑
   把逻辑绑到指定的“进入锁定”按钮的点击事件上：
   • 把isLockedToSingleObject设为true
   • 把当前画布上的激活选中对象赋值给lockedTarget
   • 遍历画布上所有对象，除了lockedTarget之外，全部设为evented = false，直接屏蔽其他对象的交互响应
   • 保持lockedTarget的selectable、evented属性为true，确保它原生的缩放、旋转、平移交互完全不受影响
3. 核心拦截逻辑（解决空白点击拦截的关键）
   直接在Canvas底层DOM元素上，事件捕获阶段绑定拦截逻辑——这步是之前没做到的核心：Fabric自身的所有鼠标事件处理都是在冒泡阶段执行的，只有在捕获阶段提前拦截，才能把空白点击触发的所有原生行为全部挡住。
   示例代码如下：

   // 获取Fabric渲染用的底层画布DOM元素
   const lowerCanvasEl = canvas.lowerCanvasEl;
   // addEventListener的第三个参数传true，代表在捕获阶段执行回调
   lowerCanvasEl.addEventListener('mousedown', (e) => {
     // 没进锁定模式就直接放行所有事件
     if (!isLockedToSingleObject) return;
     // 如果当前画布的激活对象不是我们锁定的目标（说明点到了空白/其他被屏蔽的对象）
     if (canvas.getActiveObject() !== lockedTarget) {
       // 阻断事件的后续传播，阻止所有原生默认行为
       e.stopPropagation();
       e.preventDefault();
     }
   }, true);
   

4. 绑定退出锁定模式的触发逻辑
   把逻辑绑到那个独立的“退出锁定”按钮的点击事件上：
   • 把isLockedToSingleObject设回false
   • 清空lockedTarget的引用
   • 遍历画布上所有对象，把之前临时改成evented = false的对象全部恢复为evented = true
   • 调用canvas.requestRenderAll()刷新画布状态，确保所有交互权限恢复生效

落地时容易踩的坑 #

• 别图省事把整个Canvas的interactive属性设为false，这种方式会把lockedTarget本身的交互也一起禁掉，完全不符合“仅保留单个对象交互权限”的需求
• 如果要彻底屏蔽空白拖动触发的画布框选逻辑，可以在同一个捕获阶段，给lowerCanvasEl补上mousemove、mouseup的拦截逻辑，判断规则和mousedown保持一致就行
• 拦截的时候别只靠坐标位置判断，一定要通过Fabric的getActiveObject()做判断，避免误把锁定对象自身的缩放手柄、旋转控制点这些交互区域的点击给拦下来

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