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