demo

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>

我想处理行clik和hypherlink点击。由于hepher链接已经附加到callAction（）函数，我使用jquery将click事件添加到行

$("#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');
    });
});

demo

Answer 2

您可以使用

阻止事件冒泡

e.stopPropagation()

您还可以使用CSS为tr元素指定样式。

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

在jquery中处理事件冒泡

2 个答案:

demo