单击它时更改 td 背景颜色，但它的边框除外

Question

I have a function which changes cell bg color when click on it, but I want to function do nothing when click on cell's border.

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

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

  while (target != this) {
    if (target.tagName == 'TD') {
      highlight(target);
      return;
    }
    target = target.parentNode;
  }
}

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

Answer 1

simple: do not put borders on your cells.
use css border-collapse: separate and border-spacing: ...

 document.querySelector('#my-table').onclick = ({target}) => { if (.target.matches('td')) return target.classList.toggle('clickinout') }

 body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } table { border-collapse: separate; border-spacing: 1em; background-color: #2d2d9e;; margin: 2em; } td { border: none; background: whitesmoke; padding: .3em.4em; width: 3em; height: 2em; text-align: center; cursor: pointer; } td.clickinout { background: #dddd51; }

 <table id="my-table"> <tbody> <tr><td> a 1 </td><td> a 2 </td><td> a 3 </td><td> a 4 </td></tr> <tr><td> b 1 </td><td> b 2 </td><td> b 3 </td><td> b 4 </td></tr> <tr><td> c 1 </td><td> c 2 </td><td> c 3 </td><td> c 4 </td></tr> </tbody> </table>