为什么你不应该使用Div作为可点击元素

开发 前端
我们可以通过将每个属性值设置为 Unset 来取消设置现有的CSS。我们可以添加 all:unset 一次性移除所有默认样式。在HTML中,我们有三种类型的按钮。 Submit, reset and button. 默认的按钮类型是 Submit,无论何时使用按钮,如果它不在表单内,请始终添加 Type='button' ,因为 Submit 和 Reset 与表格有关。

按钮是为任何网络应用程序提供交互性的最常见方式。但我们经常倾向于使用其他HTML元素,如 div span 等作为 clickable 元素。

但通过这样做,我们错过了许多内置浏览器的功能。

我们缺少什么?

  • 无障碍问题(空格键或回车键无法触发按钮点击)。
  • 元素将无法通过按Tab键来聚焦。

权宜之计

我们需要在每次创建可点击的 div 按钮时,以编程方式添加所有这些功能。

更好的解决方案

始终优先使用 button 作为可点击元素,以获取浏览器的所有内置功能,如果你没有使用它,始终将上述列出的可访问性功能添加到你的div中。

虽然,直接使用按钮并不直观。我们必须添加并修改一些默认的CSS和浏览器自带的行为。

使用按钮的注意事项

1、它自带默认样式

我们可以通过将每个属性值设置为 unset 来取消设置现有的CSS。

我们可以添加 all:unset 一次性移除所有默认样式。

在HTML中,我们有三种类型的按钮。 submit, reset and button. 默认的按钮类型是 submit.

无论何时使用按钮,如果它不在表单内,请始终添加 type='button' ,因为 submit 和 reset 与表格有关。

2、请不要在按钮标签内部放置 divs

我们仍然需要添加 cursor:pointer 以便将光标更改为手形。

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

责任编辑:姜华 来源: 大迁世界
相关推荐

2020-06-05 14:09:42

Kubernetes容器应用程序

2020-06-21 21:25:14

物联网WiFiIOT

2020-06-09 09:19:14

数据库

2019-04-04 14:33:19

云计算云端企业

2024-04-22 08:23:15

px面试开发

2020-09-18 07:01:38

分页offsetlimit

2018-11-20 14:03:17

数据科学数据分析数据科学家

2019-09-02 09:30:40

2016-11-03 19:52:45

2020-06-17 10:35:16

机器学习AI人工智能

2023-04-04 08:10:40

CSS字体元素

2016-10-12 16:34:37

Linux操作系统

2023-03-24 12:52:22

2023-09-20 14:01:14

2020-01-10 11:08:46

云计算公共云IT

2009-01-03 15:07:38

ibmdwAIX

2013-05-29 10:10:05

医疗搜索互联网大数据

2021-04-16 09:31:07

Rosetta 2安全软件攻击

2022-03-09 08:14:24

CSS容器container

2021-01-08 10:48:48

码农编程编码测试
点赞
收藏

51CTO技术栈公众号