Javascript - 防止嵌套事件

Question

我的 HTML 中有以下结构:

<tr id="151_movie" onclick="display_details(this);">
<td name="td_btn"><button id="151_btn_row_remove" name="btn_row_remove" type="button"></button></td>
<td>New Item just added</td>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
<td>
<input type="text" id="151_file_video" name="meta_input" placeholder="Enter Filename" value="">
</td>
</tr>

我正在为 tr 和 btn_row_remove 分配事件句柄。显然，tr 内的 tds 将具有与 tr 相同的事件处理程序。我希望我的 tds 不具有与行相同的事件处理程序，但按钮(td 内)具有自己的事件。 我尝试了以下操作，但这将禁用按钮事件处理程序...

var td_btns = document.getElementsByName('td_btn');
    for (var i=0; i < td_btns.length; i++) {
      td_btns[i].addEventListener('click', function(e) {
        //e.preventDefault();
        e.stopPropagation();
            }, true);
    };

这是 td 内按钮的事件处理程序:

var btns_row_remove = document.getElementsByName('btn_row_remove');    
for (var i=0; i < btns_row_remove.length; i++) {
          btns_row_remove[i].addEventListener('click', function(e) {
            e.stopPropagation(); //-> disables the row's event
            confirm_delete(this);
                }, true);
        };

如何为父元素 (tr) 和孙子元素 (button) 元素提供事件，但不为中间子元素 (td) 提供事件？

Answer 1

我了解到将 false 传递给 addEventListener 可以解决我的案例中的问题:

var btns_row_remove = document.getElementsByName('btn_row_remove');    
for (var i=0; i < btns_row_remove.length; i++) {
          btns_row_remove[i].addEventListener('click', function(e) {
            e.stopPropagation(); //-> disables the row's event
            confirm_delete(this);
                }, fasle); // -> disables event capturing ...
        };