1.3 KiB
1.3 KiB
Task 关闭按钮修复计划
问题分析
根据代码审查,g3-task-close 点击无反应的核心问题在于:
- 事件绑定方式错误:使用直接绑定而非事件委托
- taskId 未绑定到 DOM:无法通过 DOM 获取当前任务 ID
- closeTask 方法不完善:只删除数据,未删除对应的 DOM 元素
修复方案
1. 修改 renderTaskCenter 方法
-
在 DOM 元素上添加
data-task-id属性 -
移除直接的事件绑定
2. 修改 closeTask 方法
- 同时删除数据和对应的 DOM 元素
3. 添加事件委托(在初始化时绑定)
- 使用事件委托绑定
.g3-task-close点击事件
4. 检查 pointer-events 样式
- 确保
.g3-task-close按钮可点击
修改文件
d:\workspace\code\file-preview\g3-file\index.js
修改步骤
- 在
renderTaskCenter的 HTML 模板中添加data-task-id - 移除
renderTaskCenter中的直接事件绑定 - 修改
closeTask方法,添加 DOM 删除逻辑 - 在初始化时添加事件委托绑定
风险评估
-
低风险:修改局部代码,不影响其他功能
-
需确保事件委托只绑定一次
验证方式
- 点击关闭按钮,检查控制台是否输出正确的 taskId
- 确认任务数据和 UI 都被正确移除