应给 添加 tabindex="0" 并用 classlist.toggle('highlight') 切换 css 类实现点击变色，避免内联样式冲突和焦点边框问题，大表需用事件委托优化性能，移动端需确保 :active 不被依赖且优先级足够。
点击后怎么让表格单元格变色但不跳转
直接给 <td> 加 <code>onclick 并用内联样式改 background-color 最快，但要注意：浏览器默认会把点击态当“焦点”处理，可能触发 outline 边框（尤其在键盘操作时），视觉突兀。更稳妥的做法是用 CSS 的 :focus-visible 配合 tabindex，但零基础起步建议先用 JS 控制 class 切换。
实操建议：
- 给每个
<td> 加 <code>tabindex="0"，让它能接收焦点和点击事件 - 写一个 CSS 类如
.highlight，定义background-color: #ffeb3b;和outline: none; - JS 里监听点击，用
event.target.classList.toggle('highlight')实现点一下高亮、再点取消 - 别用
document.write()或直接拼 HTML 字符串注入事件——容易 XSS，也难维护 - 点了没反应：忘记加
tabindex，<td> 默认不可聚焦，<code>onclick在某些浏览器下可能不触发 - 点一次就卡住：用了
classList.add()却没配remove()，导致重复点击不断叠加 class - 高亮颜色被覆盖：CSS 里没加
!important也不提高选择器权重，结果tr:hover或表格主题样式压过了你的.highlight - JS 里用
document.getElementById('data-table').addEventListener('click', e => { if (e.target.tagName === 'TD') { e.target.classList.toggle('highlight'); } }) - 避免监听
document全局，防止误触其他元素；也别用querySelectorAll('td').forEach(...)，它在大表里会卡死 - 如果后续要支持 Ctrl+多选，记得检查
e.ctrlKey，但零基础先实现单点即可 - 别依赖
:active伪类实现持久高亮——它只在按下瞬间生效，松手即消失 - 移动端 Safari 对
tabindex支持良好，但需确认<td> 没被设为 <code>pointer-events: none - 如果用了
user-scalable=no的 viewport meta，有时会影响事件捕获，建议暂时去掉测试 - 真机调试时，用 Safari 开发者工具连 iPhone 查看实际触发的事件类型，比模拟器更准 实际做下来，最易忽略的是
为什么用 classList.toggle 而不是 style.backgroundColor = 'xxx'
硬写 style.backgroundColor 看似简单，但一旦单元格原本有内联背景色、或被其他 CSS 规则覆盖（比如 tr:nth-child(even) 设置了交替色），就会冲突失效，且无法统一控制高亮样式（比如加个过渡动画）。用 class 方式把样式逻辑收归 CSS，JS 只管状态切换，更可靠。
常见错误现象：
表格太大时点击卡顿怎么办
如果表格超过 200 行 × 50 列，逐个绑定事件监听器会拖慢页面加载，而且内存占用明显。这时候不该给每个 <td> 写 <code>onclick，而要用事件委托——监听整个 <table>，靠 <code>event.target 判断是否点在 <td> 上。
<p>实操建议：</p>
<ul><li>给 <code><table> 加 id，比如 <code>id="data-table"
移动端点一下就变色，但手指松开又恢复了
这是 iOS Safari 和部分安卓浏览器的“点击延迟”与伪类行为导致的：它们对 :active 的响应只维持毫秒级，且默认会清除临时样式。解决办法不是加 touchstart，而是确保高亮靠 JS class 控制，且 CSS 中明确写 .highlight { background-color: #ffeb3b !important; }。
关键细节：
tabindex 和 CSS 选择器优先级——没它，<td> 在很多场景下根本收不到点击；没调好优先级，高亮色永远出不来。别的都能补，这两处卡住就全白搭。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
