如何优化待办事项列表，使单击即可划掉，避免需双击才能生效的困扰？
- 内容介绍
- 相关推荐
本文共计793个文字，预计阅读时间需要4分钟。
在待办事项列表中，首次点击任务项无法立即添加或删除线。需要双击才能触发样式切换。根本原因是JavaScript读取`element.style.visibility`仅获取内联样式，而初始隐藏状态由CSS类定义，未被识别。
在实现待办事项（To-Do List）的「单击划掉」功能时，一个常见却易被忽视的问题是：新添加的待办项首次点击需双击才生效。这并非浏览器或事件机制异常，而是源于对 CSS 样式来源与 DOM 属性访问方式的误解。
核心问题在于以下判断逻辑：
if (markIcon.style.visibility == "hidden") { ... }
element.style 仅反映通过 JavaScript 直接设置的内联样式（如 el.style.visibility = 'hidden'），而你的 CSS 文件中已通过 .markIcon { visibility: hidden; } 定义了默认状态——该规则不会写入 style 属性，因此 markIcon.style.visibility 初始值为空字符串 ""，导致条件恒为 false，第一次点击执行的是 else 分支（即“隐藏 → 显示”），第二次点击才进入预期逻辑。
本文共计793个文字，预计阅读时间需要4分钟。
在待办事项列表中，首次点击任务项无法立即添加或删除线。需要双击才能触发样式切换。根本原因是JavaScript读取`element.style.visibility`仅获取内联样式，而初始隐藏状态由CSS类定义，未被识别。
在实现待办事项（To-Do List）的「单击划掉」功能时，一个常见却易被忽视的问题是：新添加的待办项首次点击需双击才生效。这并非浏览器或事件机制异常，而是源于对 CSS 样式来源与 DOM 属性访问方式的误解。
核心问题在于以下判断逻辑：
if (markIcon.style.visibility == "hidden") { ... }
element.style 仅反映通过 JavaScript 直接设置的内联样式（如 el.style.visibility = 'hidden'），而你的 CSS 文件中已通过 .markIcon { visibility: hidden; } 定义了默认状态——该规则不会写入 style 属性，因此 markIcon.style.visibility 初始值为空字符串 ""，导致条件恒为 false，第一次点击执行的是 else 分支（即“隐藏 → 显示”），第二次点击才进入预期逻辑。