实现点击TD单元格背景变色，点击边框时不触发该功能

要实现点击单元格内容区域才切换背景色、点击边框无操作，核心是判断点击位置是否落在单元格的边框范围内。可以通过获取单元格的计算边框宽度，结合点击事件的偏移坐标来区分点击区域。

修改后的代码如下：

let table = document.getElementById('table');

table.onclick = function(event) {
  let target = event.target;

  while (target != this) {
    if (target.tagName == 'TD') {
      // 获取单元格的计算样式，提取边框宽度
      const style = window.getComputedStyle(target);
      const borderLeft = parseInt(style.borderLeftWidth);
      const borderTop = parseInt(style.borderTopWidth);
      const borderRight = parseInt(style.borderRightWidth);
      const borderBottom = parseInt(style.borderBottomWidth);

      // 判断点击位置是否在边框区域内
      const isClickOnBorder = 
        event.offsetX < borderLeft ||
        event.offsetX > target.clientWidth - borderRight ||
        event.offsetY < borderTop ||
        event.offsetY > target.clientHeight - borderBottom;

      if (!isClickOnBorder) {
        highlight(target);
      }
      return;
    }
    target = target.parentNode;
  }
}

function highlight(td) {
  td.classList.toggle('purple');
}

代码说明 #

• 通过window.getComputedStyle(target)获取单元格的实际渲染样式，确保能拿到准确的边框宽度（包括CSS中设置的像素值）。
• 利用event.offsetX和event.offsetY获取点击位置相对于单元格左上角的偏移量，对比边框宽度判断是否点击在边框上。
• 只有当点击位置不在边框区域时，才调用highlight函数切换背景色。

补充说明 #

如果你的单元格使用了box-sizing: border-box（现代浏览器默认值），clientWidth已经包含了边框宽度，所以用clientWidth - borderRight就能得到内容区域的右边界；如果是content-box布局，需调整计算逻辑，但一般推荐使用border-box简化布局计算。

内容的提问来源于stack exchange，提问作者unnamed