Haga clic en el evento en la fila de la tabla: solo se activa si no se hace clic en 'más'

Question

Tengo algunos problemas con algún código jQuery, y estoy esperando y pensando que la solución es relativamente simple.

Decir que tengo una tabla como:

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

Ahora a través de JavaScript que hacer lo siguiente en jQuery ready (documento)();

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

Todo esto es algo bastante sencillo - Quiero ser capaz de hacer clic una fila y lo han de ser resaltado y sólo una fila se pueden destacar a la vez (obviamente, en mi código real que hago más que eso) - ahora aquí está mi problema:

Cuando un usuario hace clic en la etiqueta de anclaje, o las casillas de verificación, esto desencadena el evento de clic de fila también y no puedo averiguar cómo filtrarlo? Sé que necesito incluir el evento en mi controlador de clics, pero ¿cómo verificarlo de tal manera que funcione en tantos navegadores como sea posible?

Answer 1

Pruebe agregar manejadores a los otros elementos que responden a los eventos de clic y evitar que el evento burbujee. Esto sería adicional a lo que ya tienes.

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