点击按钮隐藏自身最简写法是this.style.display='none'，内联onclick中this指向按钮；addeventlistener中应使用event.currenttarget而非箭头函数里的this；推荐用classlist.toggle('hidden')实现显示切换，避免style.display判断陷阱。
点击按钮后隐藏自身：this.style.display = 'none' 最简写法
直接在 onclick 里用 this.style.display = 'none' 就能实现，不需要额外查 DOM 或绑定事件监听器。这里的 this 指向当前被点击的按钮元素本身，是内联事件处理中最自然的引用方式。
常见错误是写成 this.css('display', 'none')（误用 jQuery 语法）或 event.target.style...（多此一举且在某些嵌套结构中可能指向子元素）。
-
display: none会彻底移出文档流，按钮不再占位 - 若想保留占位但不可见，改用
this.style.visibility = 'hidden' - 内联
onclick中的this确保指向按钮，但函数外定义的普通函数里this会丢失，必须显式传参或用bind
addEventListener 场景下 this 不再指向按钮？用 event.currentTarget
用 addEventListener 绑定时，回调函数里的 this 默认是绑定的元素——但仅当使用传统函数声明（非箭头函数）。很多人踩坑是因为用了箭头函数，导致 this 指向外层作用域，不再是按钮。
更稳妥、无脑的做法是统一用 event.currentTarget，它永远指向监听器所绑定的元素，不受函数类型影响。
- ✅ 正确（传统函数）：
btn.addEventListener('click', function() { this.style.display = 'none'; }); - ❌ 错误（箭头函数）：
btn.addEventListener('click', () => { this.style.display = 'none'; }); // this 是 window 或 undefined - ✅ 推荐（通用）：
btn.addEventListener('click', e => { e.currentTarget.style.display = 'none'; });
隐藏后想再点出来？toggle display 要注意初始值
单纯切换 display 值容易出问题：按钮初始没有设置 display，getComputedStyle(btn).display 返回 inline（按钮默认是 inline-block），但你设过一次 'none' 后再读，就变成 'none'，无法靠判断字符串来回切换。
更可靠的方式是用类名控制，或记录原始状态。
- 推荐用 class：
btn.classList.toggle('hidden')，CSS 定义.hidden { display: none; } - 若坚持用 style，可提前缓存原始
display：btn.dataset.originalDisplay = getComputedStyle(btn).display; - 避免只靠
btn.style.display === 'none'判断，因为style.display只读内联样式，没设过就是空字符串
移动端点击无响应？可能是 pointer-events 或 CSS 干扰
按钮点了没反应，不是 JS 写错，而是被其他样式拦住了。最常被忽略的是 pointer-events: none（父容器或自身设置了），或者 opacity: 0 / visibility: hidden 导致无法触发事件。
另外，iOS Safari 对快速连续点击有延迟，默认 300ms，虽然不影响隐藏逻辑，但会让操作感变“钝”。
- 检查父级是否设了
pointer-events: none，或按钮自己有style="pointer-events: none" -
display: none的元素无法被点击，所以隐藏后自然不能再点——这是预期行为，不是 bug - 如果按钮内容是空的或只有空格，可能点击热区太小，加
padding或min-width/min-height
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
