加cursor: pointer仅改鼠标样式，不赋予点击能力；需事件委托+closest('td')+tabindex="0"+role="button"等才能真正可点击、可聚焦、可访问。
直接给 <td> 加 <code>cursor: pointer 不会让它“可点击”，只是改了鼠标样式；真正让它响应点击，得靠事件委托 + 正确的目标识别 + 可聚焦能力。
为什么 <td> 加了 <code>cursor: pointer 还是点不动
因为 cursor 是纯视觉属性，不改变 DOM 的交互能力。常见错误包括：
- 只在
<td> 上写 <code>style="cursor: pointer"，但没绑定任何事件监听器 - 事件绑在
<table> 或 <code><tbody> 上，却没用 <code>event.target.closest('td')安全提取目标单元格，导致e.target实际是文本节点或子元素 <td> 里嵌了 <code><button></button>或<a></a>，它们捕获并阻止了冒泡，<td> 根本收不到事件 <li>移动端 Safari 对 <code><td> 的点击热区识别极弱，尤其当内容为空或只有空格时 <h3>用事件委托 + <code>closest('td')安全捕获点击推荐把监听器挂在
<tbody> 上，避免为每个 <code><td> 单独绑定——既节省内存，又兼容动态渲染的行。 <ul><li>必须用 <code>e.target.closest('td')获取目标，而不是e.target.tagName === 'TD'，因为用户可能点的是<td> 里的文字、<code><span></span>或图标- 加 guard 判断：如果
!td || !td.parentElement.classList.contains('clickable-row')，就直接 return，避免误触非目标列 - 若需区分列逻辑（如第2列跳详情页、第3列弹编辑框），可用
td.cellIndex或td.dataset.action - 示例代码片段：
document.querySelector('tbody').addEventListener('click', e => { const td = e.target.closest('td'); if (!td || !td.classList.contains('action-cell')) return; if (e.target.matches('input, button, a')) return; // 避开内部可交互元素 console.log('Clicked cell:', td.textContent.trim()); }); - 配合
role="button"（不要用role="link"除非真跳转），并加aria-label描述行为，例如aria-label="编辑张三的邮箱" - 监听
keydown，对Enter和Space做相同处理：td.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleCellClick(td); } }); - 禁用状态要同步：加
aria-disabled="true"+tabindex="-1"+cursor: not-allowed
让 <td> 支持键盘操作和屏幕阅读器
<p>仅靠鼠标点击不是完整的“可点击”。键盘用户按 Tab 应能聚焦到该单元格，屏幕阅读器应知道它是交互元素。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>必须给目标 <code><td> 加 <code>tabindex="0"，否则无法进入 Tab 链，.focus() 也无效
最易被忽略的一点：移动端 Safari 对无 tabindex 且无子可聚焦元素的 <td>，连 <code>click 事件都可能不触发——不是 bug，是它的点击区域判定策略。别省那一个属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
