Question

我有一个可点击的表格行：

$("#content-display").on('click', '#myTable tbody tr', function (){           
    foo();        
});

表格格式为

<table>
<tbody>
    <tr><td><div><span></span></div></td></tr>
    <tr><td><div><span></span></div></td></tr>
    <tr><td><div><span></span></div></td></tr>
    <tr><td><div><span></span></div></td></tr>
</tbody>
</table>

当用户直接点击第3个内容时，我只想调用函数bar()（不是foo()）

$("#content-display").on('click',
                         '#myTable tbody tr td:first-child + td + td div span',
                          function (){
    bar(); 
});

不幸的是，当用户点击该范围时，系统会调用foo()和bar()。

我也试过这个，但仍然会调用foo()和bar()。

$("#content-display").on('click',
                         '#myTable tbody tr td:first-child + td + td div span',
                          function (event){
    event.preventDefault();
    bar(); 
});

Answer 1

event.stopPropagation()正是您要找的。

有关详细信息，请参阅jQuery docs。

Answer 2

而不是event.preventDefault();尝试使用：

event.stopPropagation();

更新了处理程序：

$("#content-display").on('click',
                     '#myTable tbody tr td:first-child + td + td div span',
                      function (event){
    event.stopPropagation();
    bar(); 
});

Answer 3

我相信你可以阻止它使用event.stopPropagation()

触发第一个事件

如何在单击td div span时阻止tr上的默认处理程序？

3 个答案: