3

Tengo una web, maquetada mayormente con Bootstrap y ciertas PCs no tan potentes (veasé un Core 2 Duo con 4gb de RAM) como ejemplo, mi web experimenta cierta "latencia" al clickear en elementos de formulario cómo inputs, buttons, selects y las animaciones css de estos se hacen como en cámara lenta.

Hace nada descubrí por accidente que algo como esto:

$("div").on("click", "input, select, button", function(e){
    e.stopPropagation();
});

Hacia maravillas con la experiencia de estos equipos en la página, haciendo estas acciones y sus animaciones muchisimo más fluidas (como debería ser).

La pregunta en cuestion entonces es, como yo solo he usado

e.stopPropagation();

para hacer que los clicks de algunos elementos no se ejecuten más de una vez en el pasado, realmente no tengo idea por que esto ocurre y a salvo de algunos elementos que no funcionan con normalidad y tendré que ajustar, con ése código la web se vuelve mucho más amena para los PCs menos potentes.

Esto puede traer algún problema que no estoy viendo?

3

1 respuesta 1

3


e.stopPropagation() es utilizado para detener la propagación de un evento, con el objetivo de que no se realice otra ejecución.

Mira el siguiente ejemplo.

function showContent(e) {
  alert('hola soy ' + this.id)
  //e.stopPropagation()
}

var divs = document.querySelectorAll('div')
divs.forEach(function (element) {
  element.addEventListener('click', showContent)
})
* { margin: 0; padding: 0; }

div {
  margin: auto;
  padding: 2em;
  position: relative;
  text-align: center;
  max-width: 260px;
}

div::before {  
  position: absolute;
  top: 10px;
}

#uno { background: red; }
#dos { background: lightgreen; }
#tres { background: skyblue; }

#uno::before { content: "1"; }
#dos::before { content: "2"; }
#tres::before { content: "3"; }
<div id="uno">
  <div id="dos">    
    <div id="tres"></div>
  </div>
</div>

Cuando das clic al elemento con el número tres verás que el evento clic se propaga hacia los elementos padres, esto es considerado como bubbling.

¿Qué tal si descomentas la linea de código donde utilizo stopPropagation?

Verás que la propagación del evento se detiene.

Te recomiendo leer sobre Bubbling y Capturing

Espero haberte ayudado!

1
  • Eso era lo que no sabía cómo googlear, Bubling y Capturing, voy a leer al respecto. Gracias Óscar Commented el 16 feb. 2017 a las 15:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.