# 点击区域过小的自动检测
**Repository Path**: zhangxinxu/click-accessible
## Basic Information
- **Project Name**: 点击区域过小的自动检测
- **Description**: 很多新人在开发的时候，不注意点击区域的大小，尤其在移动端，这会影响用户的交互体验，所以做了个这样的检测工具，如果有点击事件所在元素的区域太小，就会红色轮廓高亮提醒。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-30
- **Last Updated**: 2022-05-31
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 点击区域过小的自动检测
#### 介绍
很多新人在开发的时候，不注意点击区域的大小，尤其在移动端，这会影响用户的交互体验，所以做了个这样的检测工具，如果有点击事件所在元素的区域太小，就会红色轮廓高亮提醒。
#### 使用说明
1. 引入 JS 文件。
```html
```
2. 然后就结束了！点击区域过小的元素会红色高亮显示。
#### 其他说明
1. 如果设备没有鼠标这样的精确控制设备，最小高宽点击区域是 40px（WCAG 对 WEB 的建议是至少 44px），如果有鼠标设备，则最小高宽是 24px。
此数值支持修改，方法如下，在引入 JS 文件后，执行类型下面的代码：
```js
// 可精确点击时候的最小尺寸
clickAccessible.sizeFine = 30;
// 无可精确点击，如移动端的最小尺寸
clickAccessible.sizeCoarse = 44;
```
2. 必须要底层采用原生的 addEventListener 进行事件处理的项目才支持，例如 Vue 项目支持的，原生开发项目也是支持的，但是 jQuery 项目就不支持。需要自己去改造。
3. 只需要在本地和测试环境运行此 JS 文件，线上环境记得删除。