为什么有些前端一直用 div 当按钮，而不是用 button？

哈哈，这问题触及了许多前端开发者内心的“痛点”啊！确实，在代码评审或者看到别人的项目时，偶尔会遇到用 `

` 来模拟按钮的“奇葩”操作。为什么会这样呢？这背后其实涉及到一些历史遗留、技术理解的偏差、以及一些“惯性”思维。咱们掰开了揉碎了聊聊，争取讲得透彻，让你听了不觉得是机器在说话。

首先，咱们得承认，有时候用 `

` 来做“看起来像按钮”的东西，确实能满足一些“视觉上”的需求。 比如：

1. 极端的样式定制需求： 有时候产品经理 or 设计师会拿出一些“非主流”的设计稿，要求按钮必须是某种奇奇怪怪的形状、或者需要非常复杂的渐变、阴影、或者动态效果，并且这种效果用 CSS 很难直接赋给一个标准的 `` 元素，或者说，用 `div` 再套一堆元素来组合，反而更容易控制。
2. 组件化开发中的“复用”误区： 在一些组件库或者框架里，开发者可能会将一些通用的、带有交互功能的“块”封装成一个基础组件。如果这个基础组件原本就设计成了 `div` 加上事件监听，那么在复用时，开发者可能就直接拿来用了，即便它实际上是要做成一个按钮。他们可能觉得：“反正我给它加了 `cursor: pointer;`，也能点击，还能加事件，不就是个按钮嘛！”
3. 历史原因和“旧项目”遗毒： 这点很重要。在早期前端开发不那么规范的时候，或者在一些维护的老项目中，很多东西都是“能跑就行”。那时候对语义化、可访问性的重视程度可能不如现在。开发者习惯了用 `div` 来包裹各种内容，然后通过 JavaScript 来添加交互。这种写法一代代传下来，就成了某些团队的“风格”。
4. 对 `` 元素理解不够深入： 有些开发者可能没仔细研究过 `` 元素的特性。他们可能觉得 `` 元素自带的各种浏览器默认样式很难看，很难覆盖，所以干脆不用，自己用 `div` 从零开始“画”一个，这样更能掌控所有细节。
5. JavaScript 驱动的重度交互： 在一些SPA（单页应用）或者高度交互的页面中，整个页面的交互逻辑可能大部分是通过 JavaScript 来控制的。在这种模式下，开发者可能更倾向于用 `div` 来作为一个“容器”或者“触发器”，然后通过 JS 来处理点击、hover 等事件，以及动态更新内容。他们可能觉得，用 `div` 更灵活，不被 `` 的原生行为所束缚。
6. “不就是一个点击事件嘛”的思维： 有些开发者可能只关注“点击的时候能执行某个 JS 函数”这个核心功能。至于这个元素本身有什么语义、对屏幕阅读器有什么影响、是否支持键盘导航这些更深层次的问题，他们可能就没有考虑到。

那为什么不用 `` 呢？这才是关键所在。我们得强调 `` 的优势，让大家知道为什么它是“正确”的选择：

1. 语义化： 这是最重要的！`` 元素明确地告诉浏览器和开发者：“这是一个可以被用户激活的交互元素，它会触发一个动作。” 这对 SEO、屏幕阅读器（给视障用户使用的辅助技术）以及其他辅助工具来说至关重要。屏幕阅读器能识别 `` 是一个可操作的元素，并能准确地向用户传达其功能。用 `div` 模拟，屏幕阅读器可能只会把它当作一个普通的文本容器。
2. 可访问性（Accessibility）： `` 元素原生支持键盘交互。用户可以使用 Tab 键聚焦到按钮上，然后按 Enter 键或 Space 键来激活它。而用 `div` 模拟，你需要额外写很多 JavaScript 来实现这些键盘交互，这很容易出错，而且实现起来也更麻烦。
3. 原生行为和用户体验： `` 元素在浏览器中有默认的点击行为，比如提交表单。它还支持 `type` 属性（`button`, `submit`, `reset`），可以更好地控制其行为。同时，浏览器也会对 `` 元素提供一些内置的视觉反馈，比如 `:focus` 状态下的轮廓，这有助于用户知道当前聚焦在哪个元素上。
4. 可组合性： `` 元素内部可以包含其他内联元素，比如 ``、``、`` 等，用来展示图标、文本或者其他内容。这是 `` 的一个强大之处，你可以用它来创建复杂的按钮样式，而无需担心语义问题。
5. 可维护性： 当团队成员或者其他人接手你的代码时，看到 `` 元素，他们立刻就能理解这个元素的意图。如果看到一个 `div` 加上一堆 class 和 JS 来模拟按钮，他们可能需要花费更多时间去理解这个元素的具体作用。

那么，那些用 `div` 的开发者，他们“失去”了什么？

SEO 优势： 搜索引擎爬虫可能无法正确理解 `div` 的交互意图。
用户体验的“顺畅度”： 尤其是对于使用键盘导航的用户，或者使用屏幕阅读器的用户。
代码的可读性和可维护性： 增加了一层“翻译”的成本。
原生浏览器提供的便利： 很多“开箱即用”的功能需要自己去重新实现。

总结一下，为什么会有人用 `div` 当按钮？

很大程度上是因为“惯性”、“对原生元素特性了解不足”，以及一些“追求极致样式控制”的心理。他们可能为了图一时的方便或者为了满足特定的视觉需求，而牺牲了代码的语义化和可访问性。

作为一名“负责任”的前端开发者，我们应该坚守“用最合适的元素做最合适的事情”的原则。 如果你的目的是创建一个可以被用户点击并执行动作的元素，那么 `` 永远是你的首选。如果你的 `div` 真的需要模拟按钮的行为，至少要做到以下几点来弥补：

添加 `role="button"`： 告诉屏幕阅读器这是一个按钮。
添加 `tabindex="0"`： 使其可以被键盘聚焦。
监听 `keydown` 事件： 当用户按下 Enter 或 Space 键时，触发相应的动作。
添加 `cursor: pointer;`： 提供视觉上的点击提示。
添加 `:focus` 样式： 明确告诉用户当前聚焦在哪。

但是，说实话，这些“弥补”措施，加起来的复杂度和潜在的维护成本，往往比直接使用 `` 元素要高得多。所以，下次看到有人用 `div` 当按钮，你可以友善地建议一下，说不定能拯救一个项目（或者一个开发者）。 ????

网友意见

只能怪html

类似的话题

• 

  为什么有些前端一直用 div 当按钮，而不是用 button？

  

  哈哈，这问题触及了许多前端开发者内心的“痛点”啊！确实，在代码评审或者看到别人的项目时，偶尔会遇到用 `` 来模拟按钮的“奇葩”操作。为什么会这样呢？这背后其实涉及到一些历史遗留、技术理解的偏差、以及一些“惯性”思维。咱们掰开了揉碎了聊聊，争取讲得透彻，让你听了不觉得是机器在说话。首先，咱们得承认，.............
• 

  日本二战航母甲板前端为什么会有一个小孔一直在冒蒸汽?

  

  日本在二战期间建造的航空母舰，比如赤城、加贺、苍龙、飞龙、翔鹤、瑞鹤等，在甲板前端确实有一个持续冒着蒸汽的小孔，这个设计其实是当时海军为了提高舰载机起降效率而采取的一项重要措施，它的专业名称叫做“蒸汽弹射器”。大家可能会觉得航空母舰的甲板很大，飞机可以在上面滑行一段距离然后起飞。没错，陆地上的机场确.............
• 

  昨晚用九阳电饭锅炖肉，半小时后，水是热的，不开锅，什么原因，锅盖前面有一个孔，是缺零件了吗

  

  .......
• 

  为什么泰国拉玛王朝一直对前朝国王郑信尊敬有加？

  

  泰国拉玛王朝对前朝国王郑信（达信大帝）的尊敬，并非单纯的政治姿态，而是一种复杂的情感、历史记忆和国家认同的交织。这份尊敬，从拉玛王朝建立之初便已存在，并贯穿了整个王朝的历史。要理解这一点，我们需要深入探究其背后的多重原因。一、 郑信的伟大功绩：泰国的“再造之父”首先，也是最核心的原因，是郑信本人所建.............
• 

  为什么有的改装车灯罩子 前面是一个“x”？

  

  有些改装车灯罩前面会有个“X”形的设计，这可不是随便弄出来的花样，背后其实有不少讲究。简单来说，这是一种为了提升灯光效果和视觉辨识度而采用的设计，通常出现在一些氙气大灯或者LED大灯的总成里。咱们把它拆解开来，一个一个说：1. “X”形设计的主要作用是什么？ 光学透镜保护/导光槽： 这是最核心的.............
• 

  格兰仕微波炉前门有一层金属膜看不见里面食物是为什么

  

  .......
• 

  为什么有人相信全国只有袁崇焕敢去前线？督师那可是肥缺啊！？没一个袁粉对袁督师自信？

  

  这话说得有点意思，把袁崇焕“敢去前线”和“督师是肥缺”联系在一起，确实触及到了很多人对袁崇焕的复杂看法，以及明末官场的一些现实。我们不妨来掰扯掰扯，为什么会有人这么说，以及其中蕴含的深意。首先，咱们得明确一点：“全国只有袁崇焕敢去前线”这句话，严格来说是一种带有强烈情绪和个人倾向的说法，并非客观事实.............
• 

  中国动画公司为什么一做就做3D的？如果把宫崎骏那种日式手绘动画放在中国有前途么？

  

  中国动画产业近年来确实呈现出一种“3D化”的趋势，这背后有多重原因交织，既有技术、市场层面的考量，也有政策和人才培养的导向。而提到宫崎骏那种充满独特魅力的日式手绘动画，能否在中国市场站稳脚跟，同样是一个值得深入探讨的问题。中国动画为何“一做就做3D”？如果简单地说“一做就做3D”，可能有些绝对，但不.............
• 

  为什么会有一些相声界的前辈力捧公式相声?

  

  相声界的一些前辈选择力捧“公式相声”，这背后无疑是一系列复杂的原因交织而成，并非简单的“好”与“不好”就能一概而论。要详细探究，我们需要从多个维度去理解：一、 维护相声艺术的“根”与“魂”： 对传统艺术的执着与敬畏： 相声作为一门古老的语言艺术，其核心魅力在于“说学逗唱”，在于演员的临场发挥、对.............
• 

  为什么中国有很多人一怀孕就辞职，也有很多人却直到预产期前两周还在上班？

  

  在中国，孕妇在怀孕期间的去留职选择确实呈现出一种令人玩味的二元对立：一部分人选择在得知怀孕后就递交辞呈，而另一部分人则坚持工作，直到临近预产期才依依不舍地离开工作岗位。这种差异的背后，是多重社会、经济、文化以及个人因素交织作用的结果。选择辞职的孕妇：安全感、精力分配与传统观念的考量首先，我们要理解，.............
• 

  任何国家、民族都有自己医术，西医青霉素前也不一定先进。为什么只有中医黑？而没有韩医黑、西医黑？

  

  这是一个非常有意思的问题，涉及到历史、文化、科学认知以及社会舆论等多个层面。为什么我们听到更多的是“中医黑”，而相对较少听到“韩医黑”或“西医黑”呢？让我们来详细分析一下：一、 中医面临的独特挑战与历史成因1. 科学范式冲突与现代化进程中的定位模糊： 中医的根基与现代科学的差异： 中医.............
• 

  日本的大学院在世界建筑排名并不高，但是日本的建筑设计确实不错。比如前三十只有东大一所。这是为什么呢？

  

  你观察到的现象确实很值得探讨，日本大学院在世界建筑排名中“不太显眼”，但日本的建筑设计水平却享誉全球，这背后隐藏着一些有趣的原因。这并非简单的“实力与排名不符”，而是涉及评价体系、教育侧重点、行业发展以及文化语境等多个层面的复杂因素。一、排名体系的局限性：侧重学术研究而非实践与影响力首先，我们必须理.............
• 

  为什么一水的在吹vivo nex，除了前置摄像头之外跟小米mix2s有什么可以打动人的改变？

  

  说实话，vivo NEX刚出来的时候，确实引起了不少讨论，尤其是它的“真全面屏”设计，这玩意儿一下子把刘海屏、水滴屏那些“妥协”全给扔了，直接让屏幕占比干到了91.24%，这在当时绝对是个重磅消息。你想想，以前大家都在纠结屏幕黑边、刘海有多丑，NEX直接把前置摄像头塞进了升降结构，把前脸彻底干净了，.............
• 

  为什么奥斯卡.罗伯特森只有一个常规赛MVP和总冠军（还是二当家）（虽然有很多三双）却常评为历史前五？

  

  人们对于奥斯卡·罗伯特森（Oscar Robertson）职业生涯成就的评价，常常会围绕着一个核心的“困惑”：为什么这位以“大O”之名闻名于世、手握无数三双纪录的球员，职业生涯的MVP数量和总冠军数相形见绌，但却依然稳稳地占据着历史前五的讨论席位？这背后的原因，绝不仅仅是简单的数字堆砌，而是需要我们.............
• 

  我不怎么上网前几天抱怨了一句国家的不好，没说脏话，每个国家都有做的不好的地方，为什么我就被很多人乱喷？

  

  哎，你说这话我太能理解了！那种感觉就像是你掏心窝子说了一句心里话，结果扑面而来的是一堆不理解、甚至带有敌意的声音，让人挺不是滋味的。你不是第一个也不是最后一个遇到这种情况的人。咱们先别管别人怎么说，冷静下来想想，为什么会这样。这背后其实挺复杂的，可能有好几个层面的原因。首先，关于“国家不好”这件事本.............
• 

  一例一休与前瞻计划在岛内反对的声音很多，为什么蔡英文政府还要强推？长远来看这两项政策真的对台湾有帮助？

  

  岛内对于“一例一休”和“前瞻计划”的反对声浪确实不小，要说蔡英文政府为何还要力推，这背后牵涉到复杂的政治考量、执政理念，以及对台湾未来发展的判断。我们不妨来细细梳理一下。一例一休：为何坚持？“一例一休”最核心的目标是落实週休二日，将原本的“一例一休”改为“一例一休”。反对的声音主要集中在： 对劳.............
• 

  刚买的苏泊尔电饭煲，煮饭前水都擦干的，为什么饭煮好，打开一看，加热盘上有水，是怎么回事？

  

  .......
• 

  在一个小县城里，家里没有什么背景，但是我想当一个商人，有什么产业有前景或者直白一点就是比较容易一点。？

  

  在咱们这个小县城，没啥背景，想闯出点名堂当个商人，这事儿啊，确实有点挑战，但也不是没可能。关键在于找准路子，然后肯下苦功夫。我跟你说点我这些年观察下来，觉得在咱们这种地方，相对来说比较有前景，也更容易上手的事情，希望能给你点启发。咱们先得明白，县城和小县城有啥不一样。县城虽然比不上大城市，但它也有自.............
• 

  去日本留学已经拖了一年了 现在有去澳洲的想法 有前辈给点建议吗 费用专业啥的 提交成绩有什么要求吗 ？

  

  哎呀，我懂你这种纠结的心情！本来计划好去日本，结果阴差阳错拖了一年，现在又动了去澳洲的心思。这中间肯定折腾了不少吧？别急，我来跟你好好捋一捋，咱们把这澳洲留学的事儿掰开了揉碎了说，希望能帮到你下定决心，少走弯路。首先，咱们得说说“为什么是澳洲？”一年时间，说长不长，说短也不短。这段时间里，你可能对日.............
• 

  双十一前夕传出李佳琦“学历风波”，你怎么看这件事，会有什么影响？

  

  双十一临近，李佳琦的“学历风波”突然被推上风口浪尖，这无疑是给本就热闹非凡的购物节增添了一点别样的“色彩”。这件事，说实话，挺让人唏嘘的。首先，我们得把这件事掰开了揉碎了看看。起因据说是有人扒出了李佳琦早年在大学时期的一些信息，与他一直以来宣传的个人经历有些出入，具体细节坊间传言不少，有的说他大学期.............