最简方式是直接给 加 cursor: pointer，但需配合事件委托、tabindex="0" 和语义属性才能真正可点击，否则仅视觉提示无效。
给表格行加手型光标但不干扰默认行为
直接给 <tr> 加 <code>cursor: pointer 是最简方式，但要注意它只是视觉提示，不自动赋予点击能力。很多开发者误以为加了样式就“能点”，结果绑定事件时发现没反应——通常是因为事件委托没配好，或 <tr> 内部有 <code><td> 阻断了事件冒泡。
<ul><li>必须显式给 <code><tr> 设置 <code>cursor: pointer，不能只设在 <td> 上（否则鼠标移到单元格间隙时会变回箭头）
<li>如果 <code><tr> 里有 <code><button></button> 或 <a></a>，它们可能捕获事件并阻止冒泡，需手动加 event.stopPropagation()
<tr> 的点击区域识别较弱，建议同时加 <code>touch-action: manipulation
用 CSS 选择器精准控制哪些行显示手型
不是所有行都需要可点击，比如表头或分隔行。用类名控制比全局设置更安全，避免误触。
- 给可点击的行加 class，例如
<tr class="clickable-row"> <li>CSS 写成 <code>.clickable-row { cursor: pointer; }，不要用tr:hover { cursor: pointer; }（hover 不等于可点击） - 若使用 CSS-in-JS 或框架（如 React），确保 class 能正确注入到
<tr> 元素上，而不是包裹 div <li>禁用状态要同步更新样式：<code>.clickable-row.disabled { cursor: not-allowed; opacity: 0.6; } - 推荐事件委托：给
<tbody> 绑 <code>addEventListener('click', handler)，再用event.target.closest('tr')获取被点击的行 - 检查是否点击到了内部可聚焦元素（如
<input>），此时应跳过处理：if (event.target.matches('input, button, a')) return - 避免重复绑定：如果表格动态渲染，每次重绘前先
removeEventListener，或用唯一 symbol 作事件类型标识 - 必须给可点击行加
tabindex="0"，使其可聚焦 - 配合
role="row"和aria-label（如描述该行代表什么），否则 VoiceOver/NVDA 无法识别交互意图 - 按回车或空格键也应触发相同逻辑，不能只响应鼠标 click
- Chrome 120+ 开始对无
tabindex的<tr> 点击做 warning，未来可能限制行为 光标样式只是表层信号，真正的可点击性取决于语义标记、事件路径和键盘支持。漏掉任意一环，用户都会觉得“这行明明有手型，怎么点不了”。</tr>
绑定点击事件时必须处理的三个细节
光标只是第一步，真正让行“可点”靠 JavaScript。常见错误是监听 <table> 却没过滤非目标行，或用 <code>onclick 属性导致难以维护。
兼容性与无障碍注意事项
仅靠 cursor: pointer 和 click 事件对屏幕阅读器不友好，键盘用户也无法操作。这不是“能点”，只是“看起来像能点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
