使用 button 的 5 个理由

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196214.html

1. 一、禁用特性
2. 二、盒子模型和居中特性
3. 三、键盘访问
4. 四、表单特性
5. 五、屏幕阅读
6. 六、为何不使用button呢
7. 七、总结和说明

button 是平时使用最广泛的一个 HTML 元素了，只要有点击交互的地方都推荐使用这个。但是，仍然有大部分网站使用的还是div，比如某博，所到之处几乎都是 div。

既然要这么麻烦，为何不直接用 button呢？

六、为何不使用button呢

以下是我个人的一些猜想

1. button 在各个浏览器的样式表现不一致
2. button 不能包含某些标签或者会导致无效，比如a标签
3. 历史原因，以前就用 div实现了，不想折腾
4. 不知道button有这么多好用的特性
5. 不在乎这些，能实现就行，我的 js 非常强
6. 实际项目中不需要键盘访问或者屏幕阅读
7. 某些第三方组件库的封装

七、总结和说明

以上从样式和功能上介绍了原生 button元素的几个特性，同时还猜想了一些没有使用button的原因，下面总结一下：

1. button支持禁用特性，通过:disabled伪类自定义禁用样式
2. button默认盒子模型是border-box
3. button内默认水平垂直居中
4. button支持键盘访问，在聚焦状态下可以通过enter或者space触发点击事件
5. button键盘聚焦的outline可以通过outline-color修改颜色，也可以通过:focus-visible自定义键盘聚焦样式
6. button在表单中支持enter提交表单
7. button在表单中有重置功能
8. button默认支持屏幕阅读

虽然有这么多好用的特性，但是实际开发中还是有很多原因没有使用。不过不管以前如何如何，从现在开始，只要碰到”按钮”，第一优先选择button就可以了，不用做过多修饰，就能在不知不觉中提升用户体验。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/