Javascript : preventDefault & stopPropagation
Hoy en dia, se usa mucho el codigo javacript, y cada vez veo mas el ".on('click', function...." o similares (segun como cada uno lo aplique)..., pero me refiero a la asignacion de accion a un evento a través de codigo.
Debido a esto, seguramente muchas veces hemos visto funciones que llevan (o no) el parametro "e" o "evt", indicando que se espera o se quiere trabajar con el evento del objeto actual.
Éste parametro tiene varias propiedades, pero hoy solo les hablare del preventDefault y stopPropagation.
stopPropagation
|- Detiene la ejecucion en el evento actual, "cortando" el efecto bubbling.
Ejemplo: (nuestro html)
Vemos que le dimos click al boton, y se ejecuto ademas el click del divTop1 y divTop2 (esto es el "bubbling" o burbuja)
Ahora haremos el siguiente cambio sobre la funcion onclick
Id -> btn
Esto pasa porque con el stopPropagation "cancelamos" la subida del evento, y solo queda aqui, donde le indicamos.
preventDefault
|- Usado en aquellos controles que provocan un "postback", como por ejemplo el control a y el tipo boton submit.
Siguiendo el mismo html del ejemplo anterior, hacemos las siguientes modificaciones en la funcion javascript
y la pagina nunca "viaja", o sea, se queda en el mismo lugar.
Con esto, lo que vemos es que el preventDefault lo que hace es "no ejecutar" el evento por default del control, pero si deja seguir el bubbling.
Nota: se que muchos usan (y usamos) el return false, pero ten en cuenta que éste lo que hace es
1) ejecuta el preventDefault
2) ejecuta el stopPropagation
3) y sale de la ejecucion, o sea, no continua hasta el final de la funcion.
En lo personal, prefiero usar estos eventos y no el return false.
Espero les haya quedado claro y les sirva de utilidad, y nos vemos en la proxima! ;)
Bye.
Debido a esto, seguramente muchas veces hemos visto funciones que llevan (o no) el parametro "e" o "evt", indicando que se espera o se quiere trabajar con el evento del objeto actual.
Éste parametro tiene varias propiedades, pero hoy solo les hablare del preventDefault y stopPropagation.
stopPropagation
|- Detiene la ejecucion en el evento actual, "cortando" el efecto bubbling.
Ejemplo: (nuestro html)
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="divTop2"> <div id="divTop1"> <a id="a" href="http://www.google.com">Google</a> <input type="button" id="btn" value="Test Bubbling"> </div> </div> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script> (function(){ function onclick(evt){ var control = evt.currentTarget; console.log('Id ->', control.id); } $(document).on('ready',function(){ $('#btn').on('click', onclick); $('#a').on('click', onclick); $('#divTop1').on('click',onclick); $('#divTop2').on('click',onclick); }); })(); </script> </body> </html>Click sobre el boton y vemos lo siguiente en Console del (F12) del browser.
Id -> btn bubbling.html:22
Id -> divTop1 bubbling.html:22
Id -> divTop2
Ahora haremos el siguiente cambio sobre la funcion onclick
function onclick(evt) { var control = evt.currentTarget; console.log('Id ->', control.id); evt.stopPropagation(); }En la consola del browser solo vemos...
Id -> btn
Esto pasa porque con el stopPropagation "cancelamos" la subida del evento, y solo queda aqui, donde le indicamos.
preventDefault
|- Usado en aquellos controles que provocan un "postback", como por ejemplo el control a y el tipo boton submit.
Siguiendo el mismo html del ejemplo anterior, hacemos las siguientes modificaciones en la funcion javascript
function onclick(evt) { var control = evt.currentTarget; console.log('Id ->', control.id); if (control.id == 'a') { console.log('Me quedo aca! :) ') evt.preventDefault(); } }En la console del browser vemos...
Id -> a bubbling.html:19
Me quedo aca! :) bubbling.html:22
Id -> divTop1 bubbling.html:19
Id -> divTop2
Con esto, lo que vemos es que el preventDefault lo que hace es "no ejecutar" el evento por default del control, pero si deja seguir el bubbling.
Nota: se que muchos usan (y usamos) el return false, pero ten en cuenta que éste lo que hace es
1) ejecuta el preventDefault
2) ejecuta el stopPropagation
3) y sale de la ejecucion, o sea, no continua hasta el final de la funcion.
En lo personal, prefiero usar estos eventos y no el return false.
Espero les haya quedado claro y les sirva de utilidad, y nos vemos en la proxima! ;)
Bye.
Comments
Post a Comment