真正可靠的整行可点方案需同时处理样式、事件委托、语义和移动端适配：用tbody事件委托+closest('tr')捕获点击，重置table盒模型，设tr cursor:pointer与touch-action:manipulation，并添加tabindex="0"和role="row"保障无障碍。

直接给 <tr> 加 <code>onclick 或 cursor: pointer 不等于整行可点——多数失效是因为事件没冒泡、热区被截断、或移动端根本没响应。真正可靠的方案得同时处理样式、事件委托、语义和移动端适配。

为什么加了cursor:pointer还是点不中

光标只是视觉提示，不自动赋予交互能力。常见失效原因包括：

• <td> 默认有 <code>padding 和 border-spacing，导致 <tr> 实际可点击区域远小于视觉范围 <li>鼠标移到 <code><tr> 内部单元格间隙时，<code>cursor 会退回箭头，用户误以为不可点
• 如果 <tr> 里嵌了 <code><button></button>、<a></a> 或 <input>，它们默认捕获事件并阻止冒泡，<tr> 的监听器收不到 <li>移动端 Safari 对 <code><tr> 的点击区域识别极弱，不加 <code>touch-action: manipulation 几乎必失效

  用事件委托 + closest('tr') 安全绑定点击

  别在每个 <tr> 上写 <code>onclick 属性，动态表格会失控。统一在 <tbody>（或 <code><table>）上监听，再过滤目标行： <pre class="brush:php;toolbar:false;">document.querySelector('tbody').addEventListener('click', (e) =&gt; { const tr = e.target.closest('tr'); if (!tr || tr.parentElement.tagName === 'THEAD') return; if (e.target.matches('input, button, a, label')) return; // 处理点击逻辑 console.log('clicked row:', tr); });</pre> <p>关键点：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>用 <code>e.target.closest('tr') 而不是 e.currentTarget，确保拿到的是被点击的那行，而非容器

• 显式排除 THEAD 中的行，避免误触表头
• 检查 e.target 是否是内部可聚焦元素，是则跳过，防止重复触发或冲突

必须加的 CSS 才算真正“整行可点”

仅靠 JS 绑定不够，样式层必须消除热区断裂：

• 给 <tr> 加 <code>cursor: pointer，不是给 <td> <li>重置表格盒模型：<code>table { border-collapse: collapse; } 消除 border-spacing 造成的缝隙
• 给 <td> 和 <code><th> 设统一 <code>padding（如 8px），避免内容撑开后留白
• 移动端必加：tr { touch-action: manipulation; }，否则 iOS/Android 点击延迟或无响应
• 如果行需要键盘支持，必须加 tabindex="0" 并配合 role="row"，否则屏幕阅读器和键盘用户完全无法操作

复杂交互建议改用 div + role=table

当需求超出原生 <table> 能力时——比如要支持 Enter/Space 触发、全局焦点管理、或点击区域需覆盖边框外延——原生表格的语义和事件限制就会暴露： <ul><li><code><table> 不支持 <code>tabindex 全局聚焦，<tr> 无法被键盘选中 <li>浏览器对 <code><tr> 的事件捕获有优化，某些情况下 click 会静默丢弃 <li>用 <code><div role="table"> 替代，配合 <code>role="row" 和 role="cell"，既能保持语义，又能自由控制事件流和样式

• 此时可放心加 tabindex="0" 到行容器，并监听 keydown 处理空格/回车，无障碍才真正落地

最易被忽略的是：光标样式和 click 事件只是表层，真正的“可点击”由语义、焦点路径、移动端手势策略共同决定。少一个环节，用户就可能点不中、看不见反馈、或根本无法用键盘操作。