Estoy trabajando en unos webcomponents. Uno de ellos muestra un input select
con una serie de opciones que, al cambiar la selección, cambia el contenido de un div
. (algo así como pestañas).
<select id="select-example">
<option>Opción 1</option>
<option>Opción 2</option>
</select>
<div id="content"></div>
<script>
function onChangeEvt(e) {
// Modifica el contenido del div #content.
}
document.getElementById('select-example').addEventListener('change', onChangeEvt, false);
</script>
Hasta aquí, todo correcto. El problema viene cuando, desde otra aplicación, consumo este webcomponent. Tengo que incluir una validación antes de hacer el cambio de contenido y, en el caso de no superarla, que no modifique el contenido de #content
.
Esta validación también la hago en el evento change
del input select
, pero no consigo que se ejecute antes del evento original del webcomponent, siempre se ejecuta después.
Mi idea es poder ejecutar primero el evento que valida y, si no pasa la validación, cancelar el evento que cambia el contenido con un e.stopPropagation()
.
Mi pregunta es, ¿existe alguna forma de ordenar la ejecución de eventos de un elemento? ¿Podría de alguna manera ejecutar primero el segundo evento que se crea? O incluso, ¿podría desactivar momentaneamente un evento y luego volver a activarlo?
Muchas gracias por adelantado.