Blog

2 Errores comunes programando en Javascript

Cada vez que programo me encuentro con varios desafíos en el tema de Javscript/Jquery, los eventos y el DOM. Los 2 errores que más veo en la programación con Jquery.

  • El bubbling – uso erroneo de return false
  • El enqueue de los eventos

Bubbling

Para fines de la explicación, podemos encontrar el Bubbing en Quirks Mode. El bubbling is la notificación subiendo en el árbol del DOM a los demás elementos de que se a iniciado un evento.

Es decir, si le damos click a un “a” que está dentro de un “div”, al ser el link un elemento que está dentro del “div”, de igual forma se le hizo click al “div”, esa notificación es gracias al bubbling, sin embargo podemos controlar eso y he allí donde cometemos el error del “return false”. Que fuera de eso, ¿realmente que hace?

Prevent Default

Ref. Jquery. Prevent default, como literalmente se puede tomar, previene o impide le comportamiento default de un elemento. Por ejemplo, un <a/> al hacerle click, este nos lleva a un link o un anchor (#).

Con prevent Default, podemos también cambiar la acción de un select para que ya no abra, o que un checkbox no se chequee, un hover no muestre el “title” de un link.

$('.link').click(function(e){
      //hacer algo
      e.preventDefault();
});

Stop Propagation

Que pasa si en algún momento, yo tengo un div, al cual al hacerle click se carga cierto contenido por ajax. Luego me muestra más información, entre ella; un link que me abre un modal window.

Pero si al igual le damos click al link y aparte de abrirme el modalwindow me vuelve a cargar la informacion por ajax, por que el link es parte del “div” padre, para evitar eso utilizamos stopPropagation();

Basicamente evita el bubbling en el árbol del DOM.

$('div').click(function(){
	//mi codigo
});

$('div a').click(function(e){
	//evitará que se ejecute el codigo de 'div'
	e.stopPropagation();
});

Return false

El que tanto utilizábamos mucho, si deseo que no se haga bubbling y modificar el comportamiento default de un elemento. Allí se puedes utilizarlo, recuerda que utilizando por ejemplo:

$('a').click(function(e){
	//mi codigo
	e.preventDefault();
});

$('div a').click(function(e){
	//este código se ejecuta
	return false;
});

//hay un link con clase .link dentro del elemento
$('.link').click(function(e){
	//esto ya no se ejecuta
});

Otro error común en la programación es el queue de los eventos. Jquery tiene la propiedad de chaning o anidado, debido a esto; puedes generar una gran cola de eventos que se irás reproduciendo uno por uno hasta terminar la cola.

Pero… ¿No te ha pasado que pasas el mouse varias veces por un elemento que tiene un bind con hover, y este se queda trabado? Pues eso es la cola de eventos.

Para evitar eso, podemos hacerlo de 2 formas:

1. Enqueue: false

En esta forma haces que este animate se salga de la cola y se ejecute inmediatamente:

$(this).animate(left: 200, { enqueue: false });

2. Stop()

Usando stop(), haces que no tenga que terminarse el evento para que este pare.

$(this).stop(true, true).animate(...)

Entonces, posiblemente ya sabemos por que ciertas veces no se comportaba como queríamos la interfaz, o las funciones no se ejecutaban.