jquery - 处理jQuery中的事件冒泡

Question

我有一个看起来像这样的简单 HTML 表格

 <table id='resultGrid'>
   <tr>
      <td>
        <a href='javascript:callAction(xxx)'>Johnny</a>
      </td>
      <td>
         Active
      </td>
   </tr>
   <tr>
      <td>
        <a href='javascript:callAction(yyy)'>Nitro</a>
      </td>
      <td>
         In Active
      </td>
   </tr>
 </table>

我想同时处理行点击和超链接点击。由于 hepher 链接已经附加到 callAction() 函数，我使用 jquery 将点击事件添加到行

$("#resultGrid tr").each(function(){
        $(this).css('cursor','hand');
        $(this).click(function() {
             //My logic
        });
});

现在的问题是每次我点击超链接时，行点击事件也会触发。我该如何防止这种情况。

Answer 1

你可以使用e.target.nodeName

$("#resultGrid tr").each(function() {
    $(this).css('cursor', 'hand');
    $(this).click(function(e) {
        alert(e.target.nodeName.toLowerCase() != 'a');
    });
});

演示

Answer 2

您可以通过使用防止事件冒泡

e.stopPropagation()

您也可以使用 CSS 为您的tr元素分配样式。

$("#resultGrid a").click(function(e){
    // do your code
    e.stopPropagation(); // prevent event bubbling
});