テーブル行のイベントをクリックする - 他に何もクリックされていなければトリガーするだけです

Question

jQueryコードにいくつか問題がありますが、解決策が比較的簡単だと思っています。

は、私のようなテーブルがあるとしましょう：

JavaScriptを通じ今

<table> 
    <tr> 
    <td><input type="checkbox" name="hai" value="der" /></td> 
    <td><a href="mypage.php">My link</a></td> 
    <td>Some data</td> 
    <td>Some more data</td> 
    </tr> 
    ... 
</table> 

I）（jQueryの中で、次の（ドキュメント）.readyを行います。

jQuery("table tr").click(function(){ 
    var row = jQuery(this); 
    var hasClass = row.hasClass("highlight"); 
    jQuery("table tr").removeClass("highlight"); 
    if(!hasClass){ 
    row.addClass("highlight"); 
    } 
}); 

このすべてが非常に簡単なものである - 私は、行をクリックし、それが強調表示されていると、一列のみが一度に強調表示することができます持っていることができるようにしたい（もちろん私の実際のコードでは、私はそれ以上のことを - ）今ここに私の問題だ：

ユーザーがアンカータグ、またはチェックボックスをクリック

、これは同様に、行をクリックしてイベントをトリガし、私はそれをフィルタリングする方法を考え出すことはできませんか？私はクリックハンドラにイベントを含める必要があることを知っていますが、できるだけ多くのブラウザで動作するような方法でこれをチェックする方法はありますか？

Answer 1

は、イベントをクリックして、バブルアップからのイベントを停止するように反応する他の要素にハンドラを追加してみてください。これはあなたがすでに持っているものに加えてあります。

jQuery('table input, table a').click(function(e) { 
    e.stopPropagation(); 
    return true; 
}): 

Answer 2

$("table tr").click(function(e){ 

if (e.target instanceof HTMLInputElement || e.target instanceof HTMLAnchorElement){ 
return; 
} 
var row=$(this); 
$('table tr').removeClass('highlight'); 
row.addClass('highlight','normal'); 

}) 

Answer 3

$("table tr").click(function(event){ 
    if (event.currentTarget.tagName != "TR") { return; } 

    $(this).closest("table").find("tr.highlight").removeClass("highlight"); 
    $(this).addClass("highlight"); 
});