应保存事件监听器引用再用 removeeventlistener 移除，封装 suspend/resume 方法管理；事件委托场景需用 data-suspended 属性拦截；挂起时还需清理定时器、动画帧和 fetch 等副作用。
在卡片式布局中，想临时挂起某个区域的用户交互（比如禁用点击、拖拽等），不能只靠 css 的 pointer-events: none，因为这会阻止所有事件冒泡，且无法精准控制“已绑定的监听器”。真正可控的方式是：**提前用 addeventlistener 绑定时保存引用，再用 removeeventlistener 移除它；需要恢复时再重新绑定**。
1. 必须使用具名函数或绑定后的函数引用
removeEventListener 要求传入的回调函数必须与 addEventListener 时完全相同（同一引用）。匿名函数、箭头函数每次都会生成新引用，无法匹配移除：
card.addEventListener('click', () => doSomething());card.removeEventListener('click', () => doSomething()); // 不生效！
const handleClick = () => doSomething();card.addEventListener('click', handleClick);card.removeEventListener('click', handleClick); // ✅ 成功移除
2. 推荐封装成可开关的交互控制器
对卡片区域做“挂起/恢复”操作，建议封装成方法，避免重复写绑定/解绑逻辑：
- 给每个卡片维护一个
interactionHandlers对象，存所有已绑定的事件类型和回调 - 提供
suspendCard(card)方法：遍历并移除该卡片上所有已存的监听器 - 提供
resumeCard(card)方法：按原配置重新绑定 - 绑定时统一用
{ capture: false, passive: true }等选项，并在存储时一并记录，移除时还原
3. 注意事件委托场景下的处理
如果卡片区域用的是事件委托（比如在容器上监听 click，再用 event.target.closest('.card') 判断），那么挂起单个卡片不能靠移除监听器——因为监听器在父容器上。此时应：
- 在委托回调里加判断：检查
event.target是否属于被挂起的卡片（例如通过data-suspended="true"属性） - 挂起时设置属性：
card.dataset.suspended = 'true' - 委托回调开头加：
if (event.target.closest('[data-suspended="true"]')) return; - 这样既不破坏事件流，又能精准拦截，恢复时删掉属性即可
4. 挂起前确保清理副作用
有些交互可能启动了定时器、动画帧或 fetch 请求（比如长按触发预加载）。仅移除事件监听器不够，还需配套清理：
- 在挂起函数中调用
clearTimeout/cancelAnimationFrame - 对进行中的
fetch，可用AbortController中止 - 把清理函数也存进卡片的
interactionHandlers或自定义属性中，统一管理
