可以覆盖javascript事件

Question

我想知道是否有可能在javascript中对表行和图标列都有单击事件，而没有tr事件发生。表看起来像这样:

<table id="the-table"> 
  <tr>
    <td class="name">a name</td>
    <td class="description">a description</td>
    <td class="time">00:00:00</td>
    <td class="icons"><i class="fa fa-info"></i></td>
  </tr>
  <tr>
    <td class="name">a name</td>
    <td class="description">a description</td>
    <td class="time">00:00:00</td>
    <td class="icons"><i class="fa fa-info"></i></td>
  </tr>
</table>

，我有两个点击事件绑定到它。

$( "#the-table tr" ).click(function() {
 //do something
});
$( "#the-table .icons i" ).click(function() {
 //do something else
});

但是每次我尝试在图标上触发单击事件时，表行事件反而被触发。是否有可能捕获tr事件，只是触发图标点击?

Answer 1

是的，您从图标单击的处理程序调用e.stopPropagation()，以便单击不会传播("气泡")到行:

$( "#the-table .icons i" ).click(function(e) {
 e.stopPropagation();
 //do something else
});