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）和大子（按钮）元素创建事件，但不为中间子元素（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 ...
        };

Javascript - 防止嵌套事件

1 个答案: