用包裹整个卡片安全，但前提是卡片内无其他交互元素；否则会违反html规范、引发验证警告及焦点异常。
用 @#@#@#@#@#@#@#@#@#@0
<span role="button" tabindex="0"></span> 并手动处理点击和回车/空格键
pointer-events: none 在子元素上怎么配？
当必须用 JS 绑定点击（比如卡片要发请求或开 Modal），又希望整个区域响应，最稳妥方式是给卡片容器设 cursor: pointer，再用事件委托捕获点击，并通过 event.target 过滤掉不想触发的子元素。
但更轻量的做法是：对卡片内**非触发区**（如图标、关闭叉、开关控件）单独加 pointer-events: none，让点击穿透到父容器。注意它不会阻止 focus 或键盘事件，仅影响鼠标/触控命中测试。
- 适用场景：带删除图标（×）的卡片，点 × 删除，点其余区域跳转 → 给
.card__delete-icon加pointer-events: none - 不适用场景：开关
<input type="checkbox">—— 它需要真实接收点击，不能设none，应改用事件冒泡 +event.stopPropagation() - 兼容性：IE11+ 支持，无需前缀
为什么 onclick 写在 <div> 上有时不生效？
<p>根本原因不是语法错，而是 CSS 阻断了事件捕获路径。最常见的是卡片用了 <code>display: grid/flex，子项设置了 align-self: center 或 margin: auto，导致视觉居中但实际点击坐标落在空白 padding/margin 区域——而 margin 永远不响应事件，padding 区域才属于元素盒模型。
另一个隐蔽问题是父容器有 overflow: hidden 且卡片内容溢出，被裁剪的部分无法触发事件（即使看起来显示正常）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 检查手段：开发者工具选中卡片元素，看 :hover 高亮范围是否覆盖整个视觉区域
- 修复方式：确保卡片本身有明确宽高或最小尺寸（如
min-width: 0防 flex shrink）；用padding替代margin控制内边距 - 调试技巧：临时加
outline: 2px solid red查看真实响应区域
React/Vue 中卡片点击要传参，怎么避免重复绑定？
在循环渲染卡片时，直接写 onClick={() => handleClick(id)} 会为每个卡片创建新函数，导致子组件不必要的重渲染（React）或响应式依赖混乱（Vue）。这不是事件本身问题，而是闭包引用模式引发的性能隐患。
关键不是“能不能点”，而是“点的时候怎么高效传参”。原生 DOM 事件的 currentTarget 和自定义 data- 属性仍是最快路径。
- 推荐做法：卡片容器加
data-id="123"，事件处理器统一取event.currentTarget.dataset.id - React 中避免箭头函数内联，改用
useCallback缓存处理器，或把 id 作为参数传入useCallback依赖数组 - Vue 模板里不用
@click="handleClick(item.id)"，改用@click="handleClick"+ 方法内读$event.currentTarget.dataset.id
真正容易被忽略的点：卡片如果用了 transform: scale(0.95) 或 filter: drop-shadow()，某些旧版 Safari 下会破坏 pointer-events 的坐标映射，导致点击偏移。这种情况下，宁可拆成两个重叠层（一层透明响应区 + 一层视觉层），也不要依赖复杂变换后的事件精度。
