结果页操作按钮必须使用 button 标签而非 input[type="button"] 或 a 标签，因其语义正确、支持嵌套内容、可访问性好且兼容 :focus-visible；type 属性须显式设为 "button" 防误提交；禁用与加载态需结合 disabled 属性与 data-state 控制；事件绑定应使用 addeventlistener 或事件委托。
button 是结果页操作按钮的首选标签，不是 input[type="button"]，也不是用 a 加 CSS 伪装 —— 后两者在语义、可访问性或状态管理上都会埋坑。
为什么结果页必须用 button 而不是 input
结果页的操作按钮（如“重新搜索”“导出数据”“复制结果”）本质是命令动作，不是表单字段。用 input[type="button"] 会丢失嵌套能力，比如你没法在按钮里直接放 svg 图标或带 span 的多语言文案；它也不支持 :focus-visible 这类现代可访问性伪类。而 button 天然支持这些，且所有主流屏幕阅读器能正确读作“按钮”，不是“输入控件”。
常见错误现象：
- 用
input写“复制结果”，但点击后图标不随文字居中，因为input对padding和line-height的渲染在 Safari 和旧 Edge 中不一致 - 给
input加disabled，但焦点仍能进入，键盘用户按 Tab 会卡住
type 属性必须显式设为 "button"
哪怕按钮不在 form 里，也别省略 type="button"。浏览器默认值是 "submit"，一旦误包进表单或未来重构时漏删，点一下就刷新页面或提交空数据。
使用场景判断：
- 纯前端操作（如打开 Modal、触发下载）→
type="button" - 提交筛选参数到新结果页 →
type="submit"，但必须确保父级有form且action正确 - 重置当前结果页的筛选条件 →
type="reset"，同样需在form内，且表单字段要匹配
不推荐把结果页按钮塞进 form 只为用 submit —— 它会让语义混乱，且增加 DOM 查询复杂度。
禁用状态和加载态要靠 disabled + data-state 组合控制
结果页按钮常有“正在导出…”“复制中…”这类中间状态，仅靠 CSS 类切换不够：用户可能连点两次，或在禁用时仍能键盘聚焦并回车触发。
正确做法是：
- 初始禁用时，直接加
disabled属性，让浏览器自动拦截所有交互 - 进入加载态时，用 JavaScript 设置
btn.disabled = true，同时加data-state="loading" - 恢复时，先移除
data-state，再设btn.disabled = false - CSS 中用
button:disabled控制灰化样式，用button[data-state="loading"]控制旋转图标或文字替换
注意：disabled 会让按钮完全不可聚焦、不可键盘触发，这是安全底线；而仅靠 class 切换无法阻止键盘回车。
事件绑定必须用 addEventListener，不能用 onclick
结果页常需批量初始化按钮（如多个“查看详情”），或动态插入新按钮（如分页后追加）。用内联 onclick 会导致函数名污染全局作用域，且无法解绑。
实操建议：
- 用
document.querySelectorAll('.result-action')批量获取，再forEach绑定 - 如果按钮是异步渲染（如 React/Vue 组件挂载后插入），监听
click事件时用事件委托：在结果容器上监听，用event.target.matches('.export-btn')判断来源 - 避免在
DOMContentLoaded之前执行查询 —— 常见错误是脚本放在head里却没加defer，查不到节点返回null
最后提醒一点：结果页按钮的视觉反馈（:hover、:active、:focus）必须保留，哪怕只是改个背景色 —— 触屏设备没有 hover，但键盘用户和屏幕阅读器依赖 focus 状态导航，砍掉它等于切断一部分用户的操作路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
