卡片点击区域不等于视觉边界，因<a>默认为行内元素且未设display: block，导致仅内容区响应；position: absolute造成透明空洞、pointer-events: none拦截事件、触控区小于44×44px或display: none移除热区均会引发错位。
为什么卡片点击区域不等于视觉边界
卡片本身是 <div>，默认不可交互；所谓“可点击区域”实际来自你加的 onclick、addEventListener 或包裹它的 <a>。但问题常出在：明明只点了图片或标题，整张卡片却响应了——或者反过来，点了空白处没反应。这不是代码漏写，而是事件绑定对象和 CSS 布局共同作用的结果。
典型诱因包括：<a> 包裹了整个卡片但未设 display: block，导致它只占内容宽度；卡片内部用了 position: absolute 脱离文档流，留下“透明空洞”；或父容器有 pointer-events: none 拦截了事件向下传递。
用 <a> 包卡片时必须设 display: block
如果你用 <a href="..."><div class="card">...</div></a>，浏览器默认把 <a> 当作行内元素，它不会自动撑满子卡片的尺寸——哪怕卡片本身是 display: block。结果就是：只有文字、图片这些“有内容”的部分能点，周围 padding 区域无效。
- 给
<a>加display: block或display: inline-block，并确保它没有被其他样式（如max-width、float）限制宽度 - 避免在
<a>上直接设padding，改用子卡片的padding控制留白，否则点击热区会包含额外空白 - 如果卡片需要圆角阴影，
<a>本身不支持border-radius裁剪，必须让子<div class="card">承担样式，<a>只负责跳转逻辑
用 JavaScript 绑定时别漏掉冒泡和空隙
给 .card 元素加 addEventListener('click', ...) 是最常见做法，但它只对“真正渲染出来的盒模型区域”有效。如果卡片里有 margin、gap、或子元素用了 transform: translateY 微调位置，视觉上看到的“卡片整体”可能和 DOM 中的盒模型错位。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 临时加
outline: 1px solid red到.card，确认 outline 是否完整包住所有内容（包括图片、文字、按钮） - 检查 computed styles 中
pointer-events是否为auto；若有子元素设了pointer-events: none（比如遮罩层、图标 SVG），会阻断事件穿透 - 卡片内如果有
<button>或<input>，它们会捕获点击事件并阻止冒泡——若想点击按钮也触发卡片跳转，得手动在按钮里event.stopPropagation()后再调用跳转逻辑
移动端点击失效？重点查 min-height 和 tappable area
小红书、微信等平台内嵌 HTML 卡片时，常出现“手指按下去没反应”，尤其在 flex 或 grid 布局下。根本原因不是 JS 失效，而是浏览器判定该区域“不够大”，拒绝触发 click 事件（iOS Safari 默认要求可点击区域 ≥44×44px）。
- 给
.card设min-height: 44px（或更高），确保即使内容极少，也有足够触控面积 - 避免用
height: 0+padding撑高——某些 WebView 会忽略这种“无内容高度” - 不要依赖
line-height或font-size来撑高卡片，它们不参与触控区域计算 - 如果卡片是响应式网格（如
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))），需确认单列最小宽度 ≥280px 时，min-height仍生效——否则窄屏下卡片被压扁，触控失效
最容易被忽略的是：卡片是否真的“存在渲染盒”。比如用了 visibility: hidden 或 opacity: 0，看起来不可见，但依然响应点击；而 display: none 则彻底移除热区。调试时别只看眼睛，要查 computed styles 的 display 和 pointer-events 真值。
