Logo dom
W3Api

Event.preventDefault() | Dom

 
  • Modificado: 12 Oct 2023

Descripción

El método .preventDefault() nos permite detener el funcionamiento del evento sobre el que se ejecuta. Siempre y cuando el evento sea cancelable.

Por ejemplo cuando pulsamos sobre un botón en un formulario, lo que se produce es que se envía el formulario. Si queremos evitar el envío del formulario deberemos de capturar el evento click sobre el botón y ejecutar el método .preventDefault().

Sintaxis

event.preventDefault()

Objeto Padre

Event

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Evitar Envío Formulario con Listener</title>
</head>
<body>

  <h1>Evitar Envío Formulario con Listener</h1>

  <form>
    <label for="mensaje">Valor: </label>
    <input id="mensaje" type="text" value="0"/>
    <button id="inc">+1</button>
  </form>

  <script>
    const boton = document.getElementById("inc");
    const mensaje = document.getElementById("mensaje");

    boton.addEventListener("click", function (ev) {
      let valor = parseInt(mensaje.value) + 1;
      mensaje.value = valor;
      ev.preventDefault();
    });
  </script>    
    
</body>
</html>

Artículos