必须用包裹<img>，因HTML5允许且浏览器原生支持点击、键盘聚焦和屏幕阅读器；兄弟结构或嵌套错误会导致链接失效；alt缺失不致跳转失败但引发兼容性、无障碍和SSR问题；CSS中pointer-events:none、overflow:hidden裁剪、display:block无宽高均可能导致点击失效；JS控制跳转应避免href与onclick混用，优先用button或统一JS处理。
直接用 <a> 包裹 <img> 是最可靠、语义正确、无障碍友好的方式，其他方法要么有兼容性风险，要么绕开标准交互逻辑。
为什么必须用 <a> 包裹 <img>？
HTML5 明确允许 <img> 作为 <a> 的唯一子元素，且浏览器原生支持点击穿透、键盘聚焦（Tab）、屏幕阅读器朗读链接目标。如果写成兄弟结构（比如 <a> 和 <img> 并列），或把 <a> 塞进 <img> 里，链接行为会失效或被校验工具报错。
-
<a href="https://example.com"><img src="logo.png" alt="示例网站"></a>✅ 正确 -
<img src="logo.png" alt="示例网站"><a href="https://example.com">点我</a>❌ 不触发图片点击跳转 -
<img src="logo.png" alt="示例网站" onclick="location.href='https://example.com'">⚠️ 可用但绕过语义，键盘用户无法 Enter 触发
alt 属性缺失会导致跳转失效吗？
不会直接导致跳转失败，但会引发三类实际问题：旧版 Safari 在 src 加载失败时可能完全禁用该 <a> 的点击区域；无障碍检测工具（如 axe）会标记为严重问题；部分 CMS 或前端框架在 SSR 渲染时会因缺失 alt 拒绝输出整个链接。
- 哪怕图片是装饰性的，也必须写
alt=""（空字符串），不能省略属性本身 - 禁止写
alt=" "（空格）或alt="图片"这类无意义值 - 若图片含关键信息（如按钮图标），
alt需准确描述功能，例如alt="返回首页"
常见 CSS 导致点击失效的三个隐藏原因
即使 HTML 结构完全正确，全局或局部样式也可能悄悄屏蔽点击事件。排查时优先检查这些：
立即学习“前端免费学习笔记（深入）”；
-
a img { pointer-events: none; }—— 全局重置了图片区域的事件响应，应改为a img { pointer-events: auto; } - 父容器设了
overflow: hidden且<img>因 margin/padding 溢出，被裁剪掉的部分无法点击 -
<img>被设为display: block后，在某些 iOS Safari 版本中，若<a>没有显式宽高，会误判为“不可点击区域”
需要 JS 控制跳转时，别混用 href 和 onclick
当你要在跳转前做登录态判断、埋点上报或防重复点击，硬塞 onclick 到 <a> 里容易冲突：比如 event.preventDefault() 忘写，就会同时触发 JS 逻辑和默认跳转。
- 更稳妥的做法是去掉
href，改用<button type="button"><img></button>+addEventListener('click', ...) - 若必须保留
<a>结构（如 SEO 要求），请统一用 JS 控制：<a href="#" onclick="handleClick(event); return false;">，并在handleClick中手动调用location.href或window.open() - 用
window.open()时，务必补上rel="noopener"，否则存在安全漏洞
真正卡住人的往往不是怎么写，而是它被塞进了某个轮播组件、弹窗遮罩层，或者某段没人维护的全局 CSS 把 pointer-events 给静默覆盖了——遇到不跳转，先查 computed styles，再查网络面板看 src 是否 404。
