javascript - 事件冒泡和 JavaScript 复选框的问题

Question

我正在尝试创建一个在最左边的列中带有复选框的 HTML 表格。我希望能够通过单击 <tr> 上的任意位置来选择复选框元素。我已经让它工作了，但是当我点击复选框本身时，它并没有改变状态。我已经在 Firefox 54 中对此进行了测试(我不关心其他浏览器)。

我制作了一个 JSFiddle 来演示我的问题 https://jsfiddle.net/a92to0tu/

let table = document.querySelector("table");
table.addEventListener("click", function(e) {
  e.preventDefault();
  let tr = e.target.closest("tr");
  let checkbox = tr.firstElementChild.firstElementChild;
  
  // This doesn't work
  checkbox.checked = !checkbox.checked
  
  // This works but I don't like it
  // setTimeout(function() {
  //   checkbox.checked = !checkbox.checked
  // }, 100);
});

<table>
  <tr>
 <td><input type="checkbox"></td>
<td>Click works here too</td>
  </tr>
  <tr>
<td><input type="checkbox"></td>
<td>Click works here too</td>
  </tr>
</table>

<p>I can click the text/table row, but clicking the checkbox no longer works</p>

Answer 1

使用标签元素，那么你根本不需要任何脚本。

table {border-collapse: collapse;}
td { border: 1px solid #999999;}

<table>
  <tr><td><input type="checkbox" id="foo" name="foo">
      <td><label for="foo">Works here too!</label>
      <td><label for="foo">Works here three!</label>
</table>