Klicken Sie auf Ereignis in Tabellenzeile - nur auslösen, wenn nichts anderes 'angeklickt' ist

Question

Ich habe einige Probleme mit einigen jQuery-Code, und ich hoffe und denke, dass die Lösung relativ einfach ist.

Sagen wir, ich habe eine Tabelle wie:

<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> 

Jetzt durch JavaScript muss ich folgendes in jQuery (document) .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"); 
    } 
}); 

All dies ziemlich einfach Sachen sind - ich mag eine Zeile klicken, um die Lage sein, und es haben wird hervorgehoben und nur eine Zeile zu einem Zeitpunkt (offensichtlich in meinem eigentlichen Code hervorgehoben werden muß ich mehr als das) - jetzt hier ist mein Problem:

Wenn ein Benutzer auf das Anchor-Tag oder die Kontrollkästchen klickt, löst dies auch das Row-Click-Ereignis aus und ich kann nicht herausfinden, wie man das herausfiltert? Ich weiß, dass ich das Ereignis in meinen Click-Handler einbeziehen muss, aber wie kann ich das so überprüfen, dass es in so vielen Browsern wie möglich funktioniert?

Answer 1

Versuchen Sie, den anderen Elementen, die auf Klickereignisse reagieren, Handler hinzuzufügen und zu verhindern, dass das Ereignis aufbricht. Dies wäre zusätzlich zu dem, was Sie bereits haben.

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"); 
});