¿Cómo evitar evento onclick de un tr cuando clico un checkbox que está en el tr?

Seixas · #1 (**permalink**) 30/08/2006, 13:51

Saludos colegas,

tengo una duda a la que no he encontrado solución, y es que creo que es un poco rebuscado. Les comento:

Tengo varias filas(tr) en una tabla que me hace de lista de registros. Una de las celdas de la tabla muestra un checkbox para cada registro, que puede estar checked o no según un valor (por PHP). Cada tr tiene asignada un onclick que me lleva a una página.

El checkbox a la vez está ligado a una función onclick que cuando lo cambio por AJAX me cambia el valor en la BD.

Pero el problema viene que cuando pincho sobre el checkbox para que me cambie el valor de ese registro en la BD, en vez de eso reacciona el evento de la fila, y me lleva a la otra página.

Mi pregunta es: ¿Hay algun modo de hacer que el evento onclick de la tabla sea ignorado en ese checkbox?

Gracias por su ayuda!

Cap.Buscapina · #2 (**permalink**) 30/08/2006, 16:19

con este codigo evitas las "propagaciones":

Cita:

<html>
<head>
<script>
function tr(){
alert("tr");
}
function check(e){
alert("check");
e.stopPropagation();
}
</script></head>
<form>
<table>
<tr onClick="tr()"><td>
ch<input type="checkbox" onClick="check(event)">
</td></tr></table>
</form>
<body>

</body>
</html>

pero no funciona en IE.

Para solucionar esto veo dos alternativas:
1.- Capturar el evento y utilizar "srcElement" y/o "target" para comprobar que objeto se clickeó

2.- Utilizar una variable que cuando se clickee el checkbox cambie su valor y y que en la funcion que llama el TR verifique si esa variable existe o no.

saludos

PD: Si tengo tiempo pongo algun ejemplo.

Cap.Buscapina · #3 (**permalink**) 30/08/2006, 16:28

creo que ya aparecio la solucion:

Cita:

<html>
<head>
<script>
function tr(){
alert("tr");
}
function check(e){
alert("check");
if (e.stopPropagation) {
e.stopPropagation();
}else{
if(window.event) {
window.event.cancelBubble = true;
}
}
}
</script></head>
<form>
<table>
<tr onClick="tr()"><td>
ch<input type="checkbox" onClick="check(event)">
</td></tr></table>
</form>
<body>

</body>
</html>

aunque no lo probé al 100%

saludos

Seixas · #4 (**permalink**) 30/08/2006, 16:54

Muchísimas gracias C. Buscapina. No conocía esta función de stopPropagation. Es justo lo que necesitaba.

El que no funcione en explorer por ahora no es problema, ya que sólo lo utilizo para una página web personal mía, así que no tiene porqué estar en explorer.

Gracias de nuevo!