Duda con el metodo stopPropagation

[Enfermin]

Holas, alguien me podria explicar con un ejemplo claro para que sirve este metodo??, leo y leo mi libro y dice que detiene el "burbujeo" jejeje a que le llaman burbujeo??? pues no noto nada extraño en los ejemplos que encuentro
Saludos

[zerokilled]

uso de stopPropatation
este método de los objetos tipos eventos detienen la propagación de dicho objeto. evidentemente para entender este concepto es necesario capacitarse sobre el modelo estandar de los eventos.


DOM Event
en teoría, la propagación es la forma en que viaja el objeto event y constituye tres fases: captura (capture), objetivo (target), y burbujeo (bubble). cada fase se define como sigue:

• capture
  el objeto viaja desde el host environment (el núcleo donde javascript corre, en el caso de los navegadores el objeto window) hasta el elemento donde se originó el evento.
• target
  el elemento en si donde ocurrio el evento.
• bubble
  el objeto viaja desde el elemento en retroceso hasta el host environment.

¿cúal es el propósito?
la idea es que la propagación se pueda detener para que otros listener en ese camino o viaje y del mismo tipo de evento no lo capturen. o sea, un listener vendría siendo un evento registrado dispuesto a responder un tipo de evento. la propagación se puede detener en cualquiera de las tres fases. por simple comentario, entiendase que detener la propagación no es lo mismo que prevenir la acción por defecto de dicho evento. por ejemplo, stopPropagation en un enlace no evita que el navegador se redireccione al enlace.

ejemplo
un ejemplo inútil pero no deja de ser válido para demostrar el concepto. supongamos que tenemos dos elementos, uno dentro del otro. ambos elementos tienen registrado el mismo tipo de evento -en este ejemplo onclick- pero con tareas distintas. el elemento padre muestra un alert que indica las coordenadas donde se hizo click. el elemento hijo cambia arbitrariamente las dimensiones del elemento.

Código:

<style type='text/css'>
div{position:relative; width:100px; height:100px; border:1px solid #000;}
button{position:absolute; bottom:0; border:1px solid #000;}
</style>

<div onclick="alert('x: '.concat(event.clientX - this.offsetLeft, '\ny: ', event.clientY - this.offsetTop));">
<button type="button" onclick="with(this.parentNode.style){
height = Math.round(Math.random() * screen.height) + 'px';
width = Math.round(Math.random() * screen.width) + 'px';
}">tamaño</button>
</div>

sin embargo, ¿qué sucede cuando presionamos sobre el botón? el alerta se muestra pese a que el evento realmente ocurrio en el botón. la razón se debe a dos factores: la propagación del objeto y más de un listener capturan el objeto. entonces, ¿que tal si queremos evitar mostrar el alert cuando se cambia el tamaño? ahi es donde stopPropagation tiene utilidad y sentido.

Código:

onclick="with(this.parentNode.style){
height = Math.round(Math.random() * screen.height) + 'px';
width = Math.round(Math.random() * screen.width) + 'px';
}
event.stopPropagation();"

[Enfermin]

Wooooahh que linda forma de explicar y con un excelente ejemplo.. si señor ahora entiendo la utilidad de ese metodo
muchas gracias ahora sabre usar usar stopPropagation en el momento adecuado

[Morod0]

Buenas!, no consigo hacer funcionar stoppropagation, llevo poco en esto y ni leyendo el comment de arriba, consigo hacerlo.

HTML

<div class="float-left imgservicios" id="i1">
<div class="conteservicios">
<img src="img/asesori.jpg"/>
<div class="cuadro-animado-servicios" id="can1">
<div class="texto-servicios-index">
TEXTO DEL SERVICIO...
</div>
<a href="asesoria.php"><div class="cuadro-servicios-informacion">Información del Servicio</div></a>
</div>
</div>
</div>


SCRIPT

$( "#i1" ).mouseenter(function() {

$("#can1").animate({height:"100%"},{duration: 600 });

});

$("#i1" ).mouseleave(function(e){
$("#can1").animate({height:"0%"},{duration: 300 });


});


Cuando pasas el raton por encima del div "contenedor" , un div de su interior pasa de 0 a 100 (height), pero no consigo con stoppropagation que , en el momento de quitar el raton, pare el animate, no sé si me explico bien. :S.

Un saludo!