處理事件的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> 

，我想同時處理排CLIK和hypherlink點擊。由於希弗鏈接已經連接到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元素bubling。

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