itemtype='https://schema.org/WebPage' itemscope='itemscope' class="page-template-default page page-id-3052 page-child parent-pageid-2854 ast-desktop ast-separate-container ast-right-sidebar astra-4.6.14 ast-single-post ast-inherit-site-logo-transparent ast-hfb-header ast-normal-title-enabled">

016. DOM: stopPropagation & preventDefault

En los capítulos anteriores hemos estado viendo la manipulación de los eventos en el DOM. En este capítulo vamos a ver como detener esta propagación que veíamos en el capítulo anterior, porque puede haber ocasiones en las que ya no requeramos que nuestro evento se propague hacia los elementos hijos o padres, dependiendo de la fase que estemos trabajando (burbuja o captura), y entonces solamente se ejecute una sola vez la propagación de nuestra función manejadora.

Puede ocurrir que, hay ciertos elementos del DOM que tienen comportamientos o eventos por defecto, por ejm, el input submit de un formulario, sin necesidad de que programemos nada, cuando presionamos un input de tipo submit en el formulario, ese formulario se procesa, cuando controlamos el scroll de las barras de desplazamiento, ya sea con las flechas del cursor o con la rueda del mouse, ese es el comportamiento por defecto que justamente tienen las teclas de arriba/abajo o izquierda/derecha, o el comportamiento que tienen los enlaces, cuando damos clic a un enlace HTML, nos lleva al contenido que tenga ese anchor o enlace en su propia href, pero puede haber ocasiones que queramos hacer otras acciones.

Prevenir la acción por defecto

La manera de prevenir la acción por defectos que tengan nuestros elementos del DOM va a ser la siguiente. Vamos a utilizar un método denominado stopPropagation(), que, como su nombre indica, frena la propagación del evento en el resto de elementos y solo propaga el evento en el elemento sobre el que estemos actuando. También vamos a manejar un método denominado preventDefault() que lo que hace es cancelar la acción que tenga por defecto el elemento, en el caso de nuestro ejm va a ser un enlace.

Nota: es importante tener controlado el concatenamiento de los elementos sobre los que vamos a lanzar eventos.

Scroll al inicio