Evitar heredación de eventos

IXtremeLT · #1 (**permalink**) 18/07/2011, 23:50

Hola!,

Como puedo hacer para evitar que un evento se propage a sus nodos hijo.

Por ejemplo:

Código HTML:

Ver original<div id="nodo_padre" onclick="alert(this.id)">
NODO PADRE
  <div id="nodo_hijo">NODO HIJO</div>
</div>

Al dar click en el nodo hijo también se clickea y sólo quiero que el nodo padre dispare el evento.

Sé que si agrego stopPropagation de esta forma: <div id="nodo_hijo" onclick="event.stopPropagation()">NODO HIJO</div> si se detiene el evento, pero quisiera saber si hay otra forma de detenerlos para no tener que crear un onclick por cada hijo que tenga el nodo padre.

Saludos

Panino5001 · #2 (**permalink**) 19/07/2011, 00:06

Fijate si te sirve:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<style> 
#p{ width:200px; height:200px; background:#F00; position:relative} 
#h{ width:50px; height:50px; position:absolute; left:75px; top:75px; background:#36F} 
</style> 
</head> 
 
<body> 
<div id="p" onclick="ob=event.srcElement || event.target;if(ob==this)alert(this.id)"> 
  <div id="h"></div> 
</div> 
</body> 
</html>

IXtremeLT · #3 (**permalink**) 19/07/2011, 11:10

Hola!, es una buena forma gracias!, aunque seguiré estudiando acerca de los eventos en javascript por que necesito tener un mejor entendimiento, igual agradezco si alguien puede aportarme algo más de información, saludos!

zerokilled · #4 (**permalink**) 19/07/2011, 11:23

buenas,
una referencia en español que considero bastante explicada, http://kusor.net/traducciones/brainj...vents2.es.html. otras referencias que puedes consultar: w3c, quirksmode. en tu caso particular, considero que lo más que te debe interesar es respecto al flujo de propagación de los eventos, el cual consiste en tres fases: capture, target y bubble. sin embargo, tambien debes considerar el aspecto de la compatibilidad de los navegadores con el modelo estandar.

IXtremeLT · #5 (**permalink**) 20/07/2011, 11:05

Gracias lo leeré.

IXtremeLT · #6 (**permalink**) 20/07/2011, 12:55

Listo!, leído y compredído me bastó con el primer artículo que me pasaste para mis requerimientos actuales, básicamente mi problema era acerca de la captura de eventos y el burbujeo, además la propiedad relatedTarget del objeto event me servirá mucho para cuándo use mouseout. Gracias y Saludos