可点击区域是否真正“可用”需验证四层：event.target是否匹配预期元素、移动端是否响应、键盘Tab能否聚焦、屏幕阅读器是否识别为可操作；Chrome/Edge/Safari可通过Elements面板高亮热区，确认hit area是否超出视觉边界；需用event.target.closest()而非this判断目标；Canvas点击须手动坐标计算与几何判定。
可点击区域是否真正“可用”，不能只看鼠标悬停变手型或点得中，而要看 event.target 是否落在你预期的元素上、移动端是否响应、键盘 Tab 是否能聚焦、屏幕阅读器是否识别为可操作——测试必须覆盖这四层。
用开发者工具实时高亮热区
Chrome / Edge / Safari 的 Elements 面板支持直接可视化点击范围：
- 右键目标元素（如
<a></a>、<button></button>或带onclick的<div>）→ “Scroll into view”<li>按 <code>Ctrl+Shift+C（Win）或Cmd+Shift+C（Mac）进入检查模式，悬停该元素 - 观察高亮框：若明显超出文字/图标视觉边界（比如空白 padding 区域也触发），说明热区失控
- 特别注意
<label></label>：高亮应包含其padding和内部<input>，但不能延伸进相邻元素的margin - 给父容器（如
<div class="card">）加 <code>onclick，但用户点的是内部<span></span>或图标<svg></svg>→event.target是子元素，不是.card - 正确做法：在 JS 中用
event.target.closest('.card')判断是否落在目标区域内，而不是依赖this或event.currentTarget - 避免子元素写
onclick="event.stopPropagation()"，这会切断冒泡，让父级监听收不到事件 - 在控制台临时加一句：
document.addEventListener('click', e => console.log('target:', e.target, 'closest card:', e.target.closest('.card')))，快速验证 - iOS Safari 点击
<label></label>文字无反应，但点<input>本身可以 → 检查是否父级设了touch-action: none或pointer-events: none - 两个按钮之间“缝隙”能跳转 → 很可能是
padding过大 +display: inline元素受line-height影响，底部多出不可见热区 - Tab 键走到某区域“焦点消失” → 滚动容器（如卡片列表）缺
tabindex="0"，无法触发自动滚动 - 用 DevTools 的 Accessibility 面板选中元素，确认
Focusable: true且Focused: true—— 视觉 outline 不等于真实可聚焦 - 监听
canvas的click事件，用getBoundingClientRect()把clientX/clientY转成画布坐标 - 对每个图形做几何判定：圆用距离公式
Math.sqrt((x - cx) ** 2 + (y - cy) ** 2) ；矩形用 <code>x > x1 && x y1 && y ；多边形用射线法或 <code>isPointInPath() - 别依赖
addHitRegion()：该 API 已废弃，现代浏览器不支持 - 性能敏感时，先粗筛（如 bounding box 快速排除），再精判（如圆内距离计算）
这个高亮是浏览器计算出的真实 hit area，不是 CSS outline 或 background 色块，更不是设计师给的“视觉按钮大小”。
验证事件目标是否匹配预期
很多“点得中但没反应”的问题，根源是 event.target 不是你想绑定的元素：
立即学习“前端免费学习笔记（深入）”；
移动端和键盘的真机级验证
桌面端正常 ≠ 可点击区域达标。以下信号说明热区已失效：
真机测试时别只点一次，要缩放页面、切换横竖屏、用不同手指位置点同一区域，热区偏移往往只在特定缩放比下暴露。
Canvas 图形的点击检测必须手动计算
<canvas></canvas> 没有原生的图形级事件，所有“点击圆圈”“点击多边形”都靠坐标判断：
Canvas 的可点击区域完全由 JS 定义，没有 HTML 的语义保障，所以每次重绘后都要确保判定逻辑与当前图形状态一致——这是最容易被忽略的同步点。
