主图点击区域不能靠包裹硬塞事件，正确做法是直接在上绑定事件或用语义化包裹（仅含图片），并确保display: block、z-index分层、按钮独立且点击区域≥44px×44px，以兼顾懒加载、语义、可访问性与操作隔离。
主图点击区域不能靠 包裹硬塞事件
常见错误是给 <img> 外套一层 <div class="clickable-img">，再给这个 <code>div 绑 onclick。问题在于：它会拦截原生图片的语义（比如长按保存、双指缩放），也破坏了 loading="lazy" 的触发时机——浏览器只对原生 <img> 做懒加载判断。
正确做法是直接在 <img> 上绑定事件，并用 CSS 保证可点击区域完整：
-
<img> 必须设 display: block，避免底部默认留白造成点击“失灵”
- 父容器（如
<figure></figure> 或 <article></article>）加 cursor: pointer 和 position: relative，方便后续加伪元素遮罩或 hover 效果
- 如果需要支持 iOS 双指缩放，保留
<img> 的原生行为，不要用 preventDefault() 拦截 touchstart
购买按钮的点击热区必须独立于主图容器
很多页面把「立即购买」按钮放在主图右侧或下方，但用同一个 div 包住图片和按钮，再统一绑点击——这会导致用户点按钮时可能误触图片逻辑，或者按钮被图片的 z-index 盖住。
两个关键隔离点：
- 按钮必须是独立
<button type="button"></button>，不能是 <div onclick> 或 <code><a href="#"></a>
- 主图区域和按钮区域的 CSS
z-index 要明确分层：img 设 z-index: 1，按钮设 z-index: 2，且两者父容器不能共用 position: relative 而没设 z-index（否则 stacking context 不生效）
- 移动端必须保证按钮点击区域 ≥ 44px × 44px，用
padding 内撑，别靠外层 margin 或 transform: scale() 模拟
怎么让主图点击跳转详情页，又不干扰按钮操作？
最简方案是：主图本身不绑 JS 事件，而是用语义化链接包裹——但必须满足两个前提：链接只包裹 <img>，不连带价格、按钮等其他内容；且链接 href 是真实商品详情 URL，不是 # 或 javascript:void(0)。
示例结构：
<article class="product-card"><a href="/product/airpods-pro-2">
@@##@@
</a>
<strong>¥1,899</strong>
<button type="button" aria-label="立即购买">购买</button>
</article>
这样既保全了图片的语义与懒加载，又让点击区域天然隔离：点图跳转，点按钮执行加购逻辑，互不覆盖。
注意：如果主图要支持放大/切换，就别用 <a></a> 包裹，改用 <figure></figure> + 独立事件监听，此时必须手动确保 <button></button> 的 z-index 和点击穿透安全。
为什么用 role="link" 包图片反而更危险？
有人为绕过语义限制，用 <div role="link" tabindex="0"><img src="airpods-400w.jpg" srcset="airpods-400w.jpg 400w, airpods-800w.jpg 800w" sizes="(max-width: 768px) 100vw, 300px" alt="Apple AirPods Pro 第二代主动降噪无线耳机"></div> 模拟可点击图，这是典型反模式。它带来三个实际问题：
- 键盘用户按
Enter 会触发，但 Space 不会（标准链接行为是两者都响应），违反 WCAG 2.1
- 屏幕阅读器读作“link”，但没
href，用户无法预判跳转目标
- iOS Safari 对
role="link" 的触摸事件处理不稳定，常出现点一下没反应、点两下才触发
真要 JS 控制跳转，就老实用 <button type="button"></button> + aria-label 明确说明动作，再用 JS window.location.href 导航——别假装它是链接。
![]()
常见错误是给 <img> 外套一层 <div class="clickable-img">，再给这个 <code>div 绑 onclick。问题在于：它会拦截原生图片的语义（比如长按保存、双指缩放），也破坏了 loading="lazy" 的触发时机——浏览器只对原生 <img> 做懒加载判断。
正确做法是直接在 <img> 上绑定事件，并用 CSS 保证可点击区域完整：
-
<img>必须设display: block，避免底部默认留白造成点击“失灵” - 父容器（如
<figure></figure>或<article></article>）加cursor: pointer和position: relative，方便后续加伪元素遮罩或 hover 效果 - 如果需要支持 iOS 双指缩放，保留
<img>的原生行为，不要用preventDefault()拦截touchstart
购买按钮的点击热区必须独立于主图容器
很多页面把「立即购买」按钮放在主图右侧或下方，但用同一个 div 包住图片和按钮，再统一绑点击——这会导致用户点按钮时可能误触图片逻辑，或者按钮被图片的 z-index 盖住。
两个关键隔离点：
- 按钮必须是独立
<button type="button"></button>，不能是<div onclick> 或 <code><a href="#"></a> - 主图区域和按钮区域的 CSS
z-index要明确分层：img设z-index: 1，按钮设z-index: 2，且两者父容器不能共用position: relative而没设z-index（否则 stacking context 不生效） - 移动端必须保证按钮点击区域 ≥ 44px × 44px，用
padding内撑，别靠外层margin或transform: scale()模拟
怎么让主图点击跳转详情页，又不干扰按钮操作？
最简方案是：主图本身不绑 JS 事件，而是用语义化链接包裹——但必须满足两个前提：链接只包裹 <img>，不连带价格、按钮等其他内容；且链接 href 是真实商品详情 URL，不是 # 或 javascript:void(0)。
示例结构：
<article class="product-card"><a href="/product/airpods-pro-2">
@@##@@
</a>
<strong>¥1,899</strong>
<button type="button" aria-label="立即购买">购买</button>
</article>
这样既保全了图片的语义与懒加载，又让点击区域天然隔离：点图跳转，点按钮执行加购逻辑，互不覆盖。
注意：如果主图要支持放大/切换，就别用 <a></a> 包裹，改用 <figure></figure> + 独立事件监听，此时必须手动确保 <button></button> 的 z-index 和点击穿透安全。
为什么用 role="link" 包图片反而更危险？
有人为绕过语义限制，用 <div role="link" tabindex="0"><img src="airpods-400w.jpg" srcset="airpods-400w.jpg 400w, airpods-800w.jpg 800w" sizes="(max-width: 768px) 100vw, 300px" alt="Apple AirPods Pro 第二代主动降噪无线耳机"></div> 模拟可点击图，这是典型反模式。它带来三个实际问题：
- 键盘用户按
Enter会触发，但Space不会（标准链接行为是两者都响应），违反 WCAG 2.1 - 屏幕阅读器读作“link”，但没
href，用户无法预判跳转目标 - iOS Safari 对
role="link"的触摸事件处理不稳定，常出现点一下没反应、点两下才触发
真要 JS 控制跳转，就老实用 <button type="button"></button> + aria-label 明确说明动作，再用 JS window.location.href 导航——别假装它是链接。
