该代码高亮所有非原生但疑似可点击的元素（如div、span、带onclick或role="button"的元素），排除a[href]、button等合法可点击元素，用红色边框标出高风险区域，暴露语义缺失、cursor未设、触摸事件未处理等问题。
用控制台一行CSS选择器高亮所有可疑点击区域
直接在浏览器开发者工具控制台粘贴执行，能瞬间暴露哪些元素“看起来可点、实际没响应”：
document.querySelectorAll('div, span, li, article, section, label:not([for]), [onclick], [role="button"], [tabindex]:not([tabindex="-1"])').forEach(el => { if (!el.matches('a[href], button, input[type="submit"], input[type="button"], input[type="reset"]') && !el.hasAttribute('href')) el.style.outline = '2px solid red' })
这行代码会把所有常见伪按钮（div、span、带onclick的元素等）标红，但排除掉原生可点击元素（如a[href]、button）。红色边框区域就是高风险区——它们没有语义、没设cursor: pointer、也没处理移动端触摸事件。
检查 touch-action 和 pointer-events 是否被意外禁用
iOS Safari 和部分安卓 WebView 对非原生可点击元素极其挑剔，哪怕只有一层父级设置了pointer-events: none，整个子树就彻底失活。同样，缺失touch-action: manipulation会导致300ms延迟甚至点击吞没。
- 在开发者工具中选中目标区域，右侧“Computed”面板搜索
touch-action，确认值是manipulation或auto（不能是none或pan-x pan-y） - 逐级向上检查父容器的
pointer-events，尤其注意 Bootstrap 的.disabled类、Modal 背景遮罩、或自定义的overlay层 - 对表格整体设为可点击时，必须加：
table { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
验证事件是否真的冒泡到绑定层
给div.card加onclick，用户点内部文字却没跳转？问题常出在event.target不是该div本身，而是子节点（比如span或img），而你又没做边界判断。
- 别写：
onclick="window.location.href='/x'"—— 这依赖this指向，不可靠 - 改用：
onclick="window.location.href = event.target.closest('.card')?.dataset.url || '/default'" - 确保子元素没写
onclick="event.stopPropagation()"，否则冒泡链直接中断 - 动态插入的卡片，必须在插入后绑定事件，或用事件委托：
document.addEventListener('click', e => { if (e.target.closest('.card')) { /* 跳转逻辑 */ } })
移动端真机测试前必查的三个视觉线索
桌面端一切正常，iPhone上点不动？先看这三处，80%的问题当场定位：
- 点击区域是否有
border-radius+overflow: hidden组合？iOS Safari 会裁剪可点击热区，超出圆角的部分无法响应 - 目标元素是否被
position: relative+ 大额margin-top的兄弟元素覆盖？用outline临时加边框，悬停看高亮是否错位 - 页面是否缩放了？
meta name="viewport"里漏了user-scalable=no或maximum-scale=1，双击缩放会劫持第一次点击
可点击区域失效很少是JS逻辑错了，多数时候是CSS层叠、触摸策略或语义缺失在暗处卡住——盯住渲染结果，而不是源码结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
