推荐使用事件委托在上监听点击，通过closest("td, th")精准定位单元格，用classlist切换.highlight类实现高亮，支持ctrl/cmd多选，并针对移动端补充touchstart监听以消除延迟。
怎么给表格单元格绑定点击高亮逻辑
直接给 <td> 或 <code><th> 绑事件可行，但不推荐——动态增删行、复用表格结构时容易漏绑或重复绑定。更稳妥的做法是利用事件委托，在 <code><table> 上监听 <code>click，再判断目标是否为单元格。
关键点在于：必须检查 event.target 的 tagName 是否为 "TD" 或 "TH"（注意全大写，DOM 中 tagName 返回大写字符串）；同时要排除嵌套元素（比如单元格里有 <span></span> 或 <button></button>）干扰，用 closest("td, th") 更鲁棒。
示例代码：
document.querySelector("table").addEventListener("click", (e) => {
const cell = e.target.closest("td, th");
if (!cell) return;
// 清除之前高亮
document.querySelectorAll("td.highlight, th.highlight").forEach(el => {
el.classList.remove("highlight");
});
// 当前单元格加高亮
cell.classList.add("highlight");
});
高亮样式用 class 还是 style？
用 classList 切换 CSS class 是首选。硬编码 style.backgroundColor 会覆盖内联样式、难维护、且无法响应伪类（如 :hover）或媒体查询。
推荐在 CSS 中定义：
.highlight {
background-color: #d0e7ff !important;
position: relative;
}
.highlight::after {
content: "✓";
position: absolute;
top: 2px;
right: 4px;
font-size: 12px;
opacity: 0.7;
}
注意加 !important 是为了确保能压过某些表格框架（如 Bootstrap 的 table-striped）的背景色规则；::after 可选，用于视觉反馈，避免仅靠颜色变化不够明显。
多选高亮怎么实现？按住 Ctrl/Cmd 点击追加
需要区分单击和组合键点击。监听时检查 e.ctrlKey（Windows/Linux）或 e.metaKey（macOS），二者任一为 true 就进入多选模式。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 单击（无修饰键）：清除所有高亮，只保留当前
- Ctrl/Cmd + 单击：若当前已高亮则取消，否则添加
- 避免误触：不响应右键或中键点击，加
if (e.button !== 0) return
实际判断逻辑简写为：
if (e.button !== 0) return;
const cell = e.target.closest("td, th");
if (!cell) return;
if (e.ctrlKey || e.metaKey) {
cell.classList.toggle("highlight");
} else {
document.querySelectorAll("td.highlight, th.highlight").forEach(el => el.classList.remove("highlight"));
cell.classList.add("highlight");
}
移动端点击高亮延迟或失效怎么办
iOS Safari 和部分安卓浏览器对 click 有约 300ms 延迟，且 click 在触摸屏上可能不触发（尤其当单元格内含可聚焦元素时）。解决方案是改用 touchstart，并阻止默认行为防止滚动干扰：
补充监听：
const table = document.querySelector("table");
table.addEventListener("touchstart", (e) => {
e.preventDefault(); // 防止页面滚动
const cell = e.target.closest("td, th");
if (!cell) return;
// 同样的高亮/多选逻辑复用即可
if (e.touches.length === 1) {
// 模拟单点点击行为
// ……（复用上面的逻辑块）
}
});
注意：不要同时开 click 和 touchstart 并做相同操作，否则在混合设备（如带触控笔的 Windows 笔记本）上可能触发两次。稳妥做法是用 "ontouchstart" in window 检测环境，只注册对应事件。
真正麻烦的是单元格内容本身可交互（比如里面有链接或按钮），这时高亮逻辑得让位于原生行为——建议在 e.target 是可交互元素时直接 return，别强行高亮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
