如何优化待办事项列表，使单击即可划掉，避免需双击才能生效的困扰？

本文共计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 分支（即“隐藏 → 显示”），第二次点击才进入预期逻辑。

✅ 正确解决方案（推荐）

方式一：初始化内联样式（最直观）
在创建 markIcon 元素后，显式设置其初始可见性：

const markIcon = document.createElement("span"); markIcon.classList.add("markIcon"); markIcon.innerHTML = "✓"; markIcon.style.visibility = "hidden"; // ← 关键：确保 style 属性可读

方式二：改用 getComputedStyle() 检测真实渲染状态（更健壮）
替换 addStrike 函数中的判断逻辑：

function addStrike() { const computed = getComputedStyle(markIcon); if (computed.visibility === "hidden") { markIcon.style.visibility = "visible"; item.style.backgroundColor = "#888888"; to_do_text.classList.add("to_do_text_on"); delButton.classList.add("del_but_on"); } else { markIcon.style.visibility = "hidden"; to_do_text.classList.remove("to_do_text_on"); delButton.classList.remove("del_but_on"); item.style.backgroundColor = "white"; } }

? 额外优化建议

• 避免重复绑定事件：当前 item.addEventListener("click", addStrike) 在每次 getText() 中调用，若未来支持动态重渲染，需确保不重复绑定（可用 item.replaceWith(newItem) 或检查是否已绑定）。
• 语义化交互区域：将点击区域明确限定在 .markandText 或 .to_do_text 上，而非整个 .item，防止误触删除按钮。
• CSS 状态解耦：建议用单一 class 控制完成态（如 .item.completed），统一管理背景、文字、图标等样式，提升可维护性：

.item.completed { background-color: #888; } .item.completed .to_do_text { text-decoration: line-through; color: white; } .item.completed .markIcon { visibility: visible; }

这样 JavaScript 只需切换 class：

item.classList.toggle("completed");

简洁、高效、符合现代前端实践。

综上，双击问题的本质是样式读取方式与实际样式来源不匹配。通过初始化内联样式或使用 getComputedStyle()，即可让首次点击立即生效，真正实现「所见即所得」的交互体验。