Acciones predeterminadas del navegador

Muchos eventos conducen automáticamente a determinadas acciones realizadas por el navegador.

Por ejemplo:

• Un clic en un enlace: inicia la navegación a su URL.
• Un clic en el botón de envío de un formulario inicia su envío al servidor.
• Al presionar un botón del ratón sobre un texto y moverlo, se selecciona el texto.

Si manejamos un evento en JavaScript, es posible que no queramos que suceda la acción correspondiente del navegador e implementar en cambio otro comportamiento.

Evitar las acciones del navegador

Hay dos formas de decirle al navegador que no queremos que actúe:

• La forma principal es utilizar el objeto event. Hay un método event.preventDefault().
• Si el controlador se asigna usando on<event> (no por addEventListener), entonces devolver false también funciona igual.

En este HTML, un clic en un enlace no conduce a la navegación. El navegador no hace nada:

<a href="/" onclick="return false">Haz clic aquí</a>
o
<a href="/" onclick="event.preventDefault()">aquí</a>

En el siguiente ejemplo usaremos esta técnica para crear un menú basado en JavaScript.

Ejemplo: el menú

Considere un menú de sitio, como este:

<ul id="menu" class="menu">
  <li><a href="/html">HTML</a></li>
  <li><a href="/javascript">JavaScript</a></li>
  <li><a href="/css">CSS</a></li>
</ul>

Así es como se ve con algo de CSS:

Los elementos del menú se implementan como enlaces HTML <a>, no como botones <botón>. Hay varias razones para hacerlo, por ejemplo:

• A muchas personas les gusta usar “clic derecho” – “abrir en una nueva ventana”. Si usamos <button> o <span>, eso no funciona.
• Los motores de búsqueda siguen los enlaces <a href="..."> durante la indexación.

Entonces usamos <a> en el markup. Pero normalmente pretendemos manejar clics en JavaScript. Por tanto, deberíamos evitar la acción predeterminada del navegador.

Como aquí:

menu.onclick = function(event) {
  if (event.target.nodeName != 'A') return;

  let href = event.target.getAttribute('href');
  alert( href ); // ...se puede cargar desde el servidor, generación de interfaz de usuario, etc.

  return false; // evitar la acción del navegador (no vaya a la URL)
};

Si omitimos return false, luego de ejecutar nuestro código el navegador realizará su “acción predeterminada”: navegar a la URL en href. Y no lo necesitamos aquí, ya que estamos manejando el clic nosotros mismos.

Por cierto, usar la delegación de eventos aquí hace que nuestro menú sea muy flexible. Podemos agregar listas anidadas y diseñarlas usando CSS para “deslizarlas hacia abajo”.