关闭按钮必须用语义化<button type="button">，设min-width/min-height≥44px，显式监听click和keydown（Enter/Space），禁用role="button"+div，避免SVG图标失真及pointer-events干扰。
关闭按钮必须用 <button>，不是 <div> 或 SVG
用 <div class="close-btn">× 模拟按钮，是小屏点不中的根源。它没有原生焦点、不响应空格键、屏幕阅读器直接跳过，且默认触控热区远小于 48×44px。真机测试时，用户手指落在视觉按钮上却没触发，大概率是 DOM 语义丢失导致的系统级忽略。
正确做法只有一条：用 <button type="button"> 包裹明确文本或加 aria-label。例如：
<button type="button" aria-label="关闭弹窗">关闭</button>
不要写 <button>×</button>——符号“×”对视障用户无意义，也不利于多语言切换。
- 必须设
type="button"，否则在表单内会意外提交 - 禁用
role="button"套<div>，它不自动获得焦点，安卓 WebView 中常完全失效 - 避免用内联 SVG 作关闭图标：width/height 在不同 DPR 下易失真，首次渲染常尺寸异常
min-width 和 min-height 必须设为 44px 起
CSS 中仅靠 font-size: 20px 或 width: 32px 不足以保证可点。W3C 明确要求最小触控目标为 44×44 CSS 像素（iOS）或 48×48（Android），且这个尺寸要包含 padding、border 等所有可交互区域。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.close-btn {<br> min-width: 44px;<br> min-height: 44px;<br> padding: 8px;<br> border: none;<br> background: transparent;<br>}
注意：不要只设 width/height 固定值，文字按钮随字号缩放时会撑不开；min- 才是保底逻辑。
- 真机测试时重点点按钮四角和边缘，模拟用户偏移点击
- 若按钮是右上角悬浮式，检查父容器是否有
overflow: hidden裁剪了热区 - 动态插入的弹窗（如 JS 创建），确保样式在元素挂载后立即生效，而非依赖后续重排
键盘支持不能只监听 click，keydown 必须补全
只写 onclick="closeModal()" 或只绑 addEventListener('click', ...)，会导致键盘用户按 Space 键时页面滚动、按 Enter 无反应——因为原生 <button> 对 Space 的默认行为是触发 click，但若你阻止了默认或用了非标准结构，这层链路就断了。
安全写法是显式监听两个事件：
const closeBtn = document.querySelector('.close-btn');<br>closeBtn.addEventListener('click', handleClose);<br>closeBtn.addEventListener('keydown', e => {<br> if (e.key === 'Enter' || e.key === ' ') {<br> e.preventDefault();<br> handleClose();<br> }<br>});
-
e.preventDefault()对Space是必须的，否则会触发页面向下滚动 - 别漏掉
e.key === ' '（空格字符，不是字符串 "space"） - 如果弹窗是
<dialog>，仍需手动绑定，因为dialog.close()不会自动响应子按钮的键盘事件
事件委托场景下，热区失效常因父容器 pointer-events 干扰
在卡片列表、SVG 地图等复杂结构中，关闭按钮可能被包裹在多层 <g>、<svg> 或带 transform 的容器里。此时即使按钮本身尺寸达标，也可能因父级设置了 pointer-events: none 或 all 错误覆盖，导致触摸事件根本传不到按钮。
快速排查方法：在按钮上临时加 outline: 2px solid red，再真机点击，看是否能聚焦；若不能，说明事件被拦截。
- 检查所有祖先元素，特别是 SVG 内的
<g>是否有pointer-events: none - 避免给遮罩层（overlay）设
pointer-events: none后，又期望它接收点击关闭——这是自相矛盾 - 移动端 Safari 对嵌套过深（>5 层）的
touchstart有延迟，把按钮提到更浅的 DOM 层级（如直接挂载到<body>）能显著改善响应
Space 支持和真机边缘点击测试——写完代码后，不按两下空格、不拿手机戳三遍右上角，就上线，大概率留下不可见的体验断点。 
