Ejemplo de Dom Event.preventDefault

los Event interfaz preventDefault() el método le dice al agente de usuario que si el evento no se maneja explícitamente, su acción predeterminada no debe tomarse como lo haría normalmente. El evento continúa propagándose como de costumbre, a menos que uno de sus oyentes de eventos llame stopPropagation() o stopImmediatePropagation(), cualquiera de los cuales termina la propagación a la vez.

Como se indica a continuación, llamando preventDefault() para un evento no cancelable, como uno enviado a través de EventTarget.dispatchEvent(), sin especificar cancelable: true no tiene efecto.

Sintaxis

event.preventDefault();

Ejemplos de

Bloqueo del manejo de clics predeterminado

Alternar una casilla de verificación es la acción predeterminada de hacer clic en una casilla de verificación. Este ejemplo demuestra cómo evitar que eso suceda:

JavaScript

document.querySelector("#id-checkbox").addEventListener("click",function(event)
         document.getElementById("output-box").innerHTML +="Sorry! preventDefault() won't let you check this!
";
         event.preventDefault();,false);

HTML

<p>Please click on the checkbox control.p><form><labelfor="id-checkbox">Checkbox:label><inputtype="checkbox"id="id-checkbox"/>form><divid="output-box">div>

Resultado

Evitar que las pulsaciones de teclas lleguen a un campo de edición

El siguiente ejemplo demuestra cómo se puede evitar que la entrada de texto no válido llegue al campo de entrada con preventDefault(). Hoy en día, normalmente deberías usar validación de formulario HTML nativo en lugar de.

HTML

Aquí está el formulario:

<divclass="container"><p>Please enter your name using lowercase letters only.p><form><inputtype="text"id="my-textbox">form>div>

CSS

Usamos un poco de CSS para el cuadro de advertencia que dibujaremos cuando el usuario presione un inválido key:

.warningborder: 2px solid #f39389;border-radius: 2px;padding: 10px;position: absolute;background-color: #fbd8d4;color: #3b3c40;

JavaScript

Y aquí está el código JavaScript que hace el trabajo. Primero, escuche keypress eventos:

var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener('keypress', checkName,false);

los checkName() función, que mira el pulsado key y decide si permitirlo:

functioncheckName(evt)var charCode = evt.charCode;if(charCode !=0)if(charCode <97

los displayWarning() La función presenta una notificación de un problema. No es una función elegante, pero funciona a los efectos de este ejemplo:

var warningTimeout;var warningBox = document.createElement("div");
warningBox.className ="warning";functiondisplayWarning(msg)
  warningBox.innerHTML = msg;if(document.body.contains(warningBox))
    window.clearTimeout(warningTimeout);else// insert warningBox after myTextbox
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);

  warningTimeout = window.setTimeout(function()
      warningBox.parentNode.removeChild(warningBox);
      warningTimeout =-1;,2000);

Resultado

Notas

Vocación preventDefault() durante cualquier etapa del evento, el flujo cancela el evento, lo que significa que no se producirá ninguna acción predeterminada normalmente realizada por la implementación como resultado del evento.

Puedes usar Event.cancelable para comprobar si el evento es cancelable. Vocación preventDefault() para un evento no cancelable no tiene ningún efecto.

Especificaciones

Compatibilidad del navegador