イベントバブリングの問題とJavaScriptチェックボックス

Question

一番左の列にチェックボックスを含むHTMLテーブルを作成しようとしています。私は<tr>要素のどこかをクリックしてチェックボックスを選択できるようにしたいと思います。私はそれを働かせたが、私はチェックボックス自体をクリックすると状態は変わらない。私はFirefox 54でこれをテストしました（他のブラウザは気にしません）。

if(e.target !== checkbox) { 

let table = document.querySelector("table"); 
 
table.addEventListener("click", function(e) { 
 
    let tr = e.target.closest("tr"); 
 
    let checkbox = tr.firstElementChild.firstElementChild; 
 
    
 
    if (e.target !== checkbox) { 
 
checkbox.checked = !checkbox.checked 
 
    } 
 
});

<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>

：

私はあなたがクリックチェックボックスをターゲットにされていないことを確認するために条件を設定する必要が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

を実証作りました

Answer 2

label要素を使用すると、スクリプトはまったく必要ありません。

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>