用 this.style.display = 'none' 直接隐藏按钮最简单，需确保事件绑定在按钮自身；恢复显示应设 this.style.display = '' 以保留原始样式；推荐用 classlist.add('hidden') 配合 css 类管理，更易维护和扩展。
点击后用 style.display 隐藏按钮最直接
按钮自己隐藏自己，核心就是修改自身的 display 样式。不需要额外状态变量或框架，原生 DOM 就能搞定。
常见错误是写成 button.style.display = 'none' 但没绑定事件，或者绑在了错误的元素上（比如绑在父容器却想隐藏按钮本身）。
- 确保事件监听器加在目标
<button></button>元素上，不是 document 或其他父级 - 推荐用
addEventListener，避免覆盖已有事件；直接写onclick属性也行，但可维护性差 - 别用
visibility: hidden—— 它保留占位空间，用户仍可能误点或影响布局
<button id="shareBtn">分享</button>
<script>
document.getElementById('shareBtn').addEventListener('click', function() {
this.style.display = 'none';
});
</script>
需要再显示时得用 style.display = '' 而不是 'block'
如果后续逻辑要“恢复显示”，不能硬写 display = 'block'，因为按钮原本可能是 inline、inline-block，甚至被 CSS 设为 flex 子项——硬设会破坏原有样式流。
清空内联 display 值，浏览器会自动回退到 CSS cascade 计算出的默认值。
-
this.style.display = ''是安全做法，等价于删除该内联样式 - 如果用了
getComputedStyle(this).display记录原始值再恢复，反而多此一举且易错 - 注意：
display = 'unset'在部分老浏览器不支持，不推荐
移动端点击延迟导致连续触发？加 event.preventDefault() 没用
按钮隐藏本身不会引发点击延迟，但如果你在 click 里还做了 fetch 或重定向，用户可能因视觉反馈滞后而重复点击 —— 这时按钮还没来得及隐藏，就触发了多次。
- 真正要防的是重复提交，不是延迟本身；隐藏按钮只是辅助手段
- 应在事件处理开头就设
this.disabled = true（同时配合style.opacity = 0.6提供视觉反馈），比单纯隐藏更可靠 -
event.preventDefault()对原生<button></button>的 click 无效，它不触发默认行为
用 classList.toggle() 配合 CSS 更利于维护
纯 JS 控制样式容易散落，尤其当隐藏逻辑扩展为“隐藏+显示加载动画+禁用”时，内联 style 会越来越难管。
把表现逻辑收进 CSS 类，JS 只负责切换，更清晰也更容易复用。
- CSS 中定义
.hidden { display: none; }，JS 里调用this.classList.add('hidden') - 如果要支持过渡动画（比如淡出），必须用
opacity+transition，display无法过渡 - 注意：
classList.toggle('hidden')是切换，不是单向隐藏；确认需求是否真需要来回切
复杂点在于，隐藏之后如果页面其他逻辑还依赖这个按钮的 DOM 存在（比如监听它的 offsetHeight），就得小心——display: none 后它不再参与布局，尺寸相关属性会变成 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
