3

Me gustaría saber por qué se prioriza la ejecución de un js al clickar en un botón que a su vez tiene un enlace definido. Es decir, en el menú de navegación, cuando se clicka en un elemento, se despliega todas las opciones agrupadas en él (esta acción la ejecuta el js). Sin embargo, este mismo elemento también debería abrir una nueva ventana ya que tiene implementado un enlace <a> ¿Por qué ocurre esto y no se abre este enlace?

El ejemplo concreto es con el menú de navegación en versión mobile. La página de categoría (imaginemos zapatos), al clickarse de despliegan todas las opciones (zapatos blancos y zapatos negros). Este elemento de categoria (zapatos) contiene un enlace que debería abrirse cuando se clicka en el elemento, sin embargo, la unico que ocurre es que se despliegan todas las subcategorias.

Os dejo el código (limpiando URLs y quitando alguna info privada):

<ul>
  <li role="presentation">
    <img class="mobile" src="/media/catalog/category/dfgdfgdf.jpg">
    <a href="https://URL-de-categoria.html" aria-haspopup="true" role="menuitem">
      <span>Zapatos</span>
    </a>
    <ul role="menu" aria-expanded="true" style="display: block; top: 98.3438px; left: 0px;">
      <li role="presentation">
        <a href="https://URL-subcategoria.html" role="menuitem">
          <span>Zapatos blancos</span>
        </a>
      </li>
      <li role="presentation">
        <a href="https://URL-de-subcategoria2.html">
          <span>Zapatos negros</span>
        </a>
      </li>
    </ul>
  </li>
</ul>
1
  • ¿Cuál es el código JS que trabaja con ese HTML? Puede que la escucha de eventos en el mismo indique de hacer otras cosas distintas a lo que esperas.
    – A. Cedano
    Commented el 1 jul. 2021 a las 11:00

1 respuesta 1

4

Para cada evento que ocurre en el navegador, hay un comportamiento por defecto. Este comportamiento puede ser prevenido:

document.querySelector('a').addEventListener('click', event => {
  event.preventDefault(); // paramos el comportamiento por defecto
  console.log('nope!');
});
<a href="https://developer.mozilla.org/es/" > Enlace a MDN </a>

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.