div点击无手型和反馈是因为它不是原生可交互元素，需同时设置cursor: pointer、tabindex="0"、:focus/:active样式、role="button"及aria-label等才能实现完整可访问性。
为什么 div 点击没手型、没反馈？
浏览器只对原生可交互元素（如 button、a、input）默认赋予 cursor: pointer 和焦点/激活状态样式。普通 div 或 span 没这些，光加 onclick 也不自动变手型，用户感知不到“能点”。
让 div 表现得像按钮的最小 CSS 配置
不是加个 cursor: pointer 就完事——那只是视觉欺骗，缺失焦点管理、键盘可访问性、激活反馈，实际体验会断层。
- 必须加
cursor: pointer和user-select: none（防误选文字） - 用
tabindex="0"让它能被 Tab 键聚焦，否则键盘用户点不了 - 定义
:focus样式（比如outline: 2px solid #007bff），别删 outline 而不替换 - 定义
:active样式（比如transform: scale(0.98)），否则点击无反馈 - 如果内容是纯图标或无文本，补
aria-label，否则屏幕阅读器读不出功能
role="button" 是语义补丁，不是样式开关
加 role="button" 不会让元素自动获得点击样式，但它告诉辅助技术“这东西行为上等价于 button”，触发屏幕阅读器朗读为“按钮”，并支持空格/回车键触发。不加这个，即使你做了所有样式和 tabindex，视障用户仍可能认为它只是个普通容器。
注意：如果它真要执行按钮逻辑（比如提交、切换状态），优先改用 button 元素——role="button" 是兜底方案，不是首选。
常见踩坑：伪按钮的 focus 状态丢失
很多人给 div 加了 tabindex="0"，但没处理焦点移入后的样式，或者用了 outline: none 却没提供替代焦点指示器。结果是：键盘用户按 Tab 能聚焦到它，但完全看不到焦点在哪，操作中断。
更隐蔽的问题：在 Safari 中，div[role="button"] 默认不响应空格键，必须手动监听 keydown 并判断 event.code === 'Space' 或 event.key === 'Enter' 才能补全行为。
真正难的不是让它“看起来能点”，而是让它在鼠标、触屏、键盘、辅助技术下表现一致——这点常被忽略，直到 QA 或无障碍审计时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
