0

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 changedel 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.

1
  • A ver, que me he perdido un poco... el evento 'change' sobre el webcomponent, a quien le da el control: a la aplicacion?, se me ocurren varias parches para solucionar esto, pero algo asi como cambiar el orden de eventos no se si se podrá hacer
    – Iria
    Commented el 15 jul. 2020 a las 10:23

1 respuesta 1

-1

Según https://www.quirksmode.org/js/events_order.html, los eventos se lanzan desde el browser, entiendo que ahí el desarrollador no tiene ningún control.

Sobre activar/desactivar un evento... se puede hacer, eso fijo. Aquí tienes un ejemplo sobre un botón https://stackoverflow.com/questions/4594064/how-can-i-temporarily-disable-click-events-on-a-button-without-actually-disablin.

Yo lo que haría es pausar la ejecución del evento hasta que la validación de un resultado, si no es satisfactorio frenar el evento del todo.

Por cierto, no entiendo que otra aplicación pueda ejecutar tu webcomponent, cuando lo que hace es copiar el component, incluido los eventos asociados, métodos, etc... e incluirlo en su código, de esta forma puedes tener varios webcomponents en una misma web que sean 'copia' del mismo

1
  • Aunque no apliqué el negativo, a tu respuesta le hace falta por lo menos un código que de soporte o muestre lo que planteas. Un enlace no es suficiente. Saludos Commented el 15 jul. 2020 a las 11:14

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.