La función event.preventDefault() no funciona en IE
A continuación se muestra mi código JavaScript (mootools):
$('orderNowForm').addEvent('submit', function (event) {
event.preventDefault();
allFilled = false;
$$(".required").each(function (inp) {
if (inp.getValue() != '') {
allFilled = true;
}
});
if (!allFilled) {
$$(".errormsg").setStyle('display', '');
return;
} else {
$$('.defaultText').each(function (input) {
if (input.getValue() == input.getAttribute('title')) {
input.setAttribute('value', '');
}
});
}
this.send({
onSuccess: function () {
$('page_1_table').setStyle('display', 'none');
$('page_2_table').setStyle('display', 'none');
$('page_3_table').setStyle('display', '');
}
});
});
En todos los navegadores excepto IE, esto funciona bien. Pero en IE, esto provoca un error. Tengo IE8, así que mientras usaba su depurador de JavaScript, descubrí que el eventobjeto no tienepreventDefault método que esté causando el error y por eso se envía el formulario. El método es compatible con Firefox (que descubrí usando Firebug).
¿Alguna ayuda?
en IE, puedes usar
event.returnValue = false;
para lograr el mismo resultado.
Y para no recibir un error, puedes probar la existencia de preventDefault:
if(event.preventDefault) event.preventDefault();
Puedes combinar los dos con:
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
Si vincula el evento a través de la función addEvent de mootools, su controlador de eventos obtendrá un evento fijo (aumentado) como parámetro. Siempre contendrá el método preventDefault().
Pruebe este violín para ver la diferencia en el enlace de eventos. http://jsfiddle.net/pFqrY/8/
// preventDefault always works
$("mootoolsbutton").addEvent('click', function(event) {
alert(typeof(event.preventDefault));
});
// preventDefault missing in IE
<button
id="htmlbutton"
onclick="alert(typeof(event.preventDefault));">
button</button>
Para todos los usuarios de jQuery , pueden corregir un evento cuando sea necesario. Digamos que usó HTML onclick=".." y obtuvo un evento específico de IE que carece de preventDefault(), simplemente use este código para obtenerlo.
e = $.event.fix(e);
Después de eso e.preventDefault(); funciona bien.
Sé que esta es una publicación bastante antigua, pero dediqué un tiempo a intentar que funcione en IE8.
Parece que hay algunas diferencias en las versiones de IE8 porque las soluciones publicadas aquí y en otros hilos no funcionaron para mí.
Digamos que tenemos este código:
$('a').on('click', function(event) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
});
En mi preventDefault()método IE8 existe debido a jQuery, pero no funciona (probablemente debido al punto siguiente), por lo que fallará.
Incluso si configuro returnValuela propiedad directamente en falso:
$('a').on('click', function(event) {
event.returnValue = false;
event.preventDefault();
});
Esto tampoco funcionará, porque acabo de configurar alguna propiedad del objeto de evento personalizado de jQuery.
La única solución que me funciona es establecer la propiedad returnValuede la variable global event de esta manera:
$('a').on('click', function(event) {
if (window.event) {
window.event.returnValue = false;
}
event.preventDefault();
});
Sólo para ponérselo más fácil a alguien que intente convencer a IE8 para que funcione. Espero que IE8 muera pronto de manera horrible y dolorosa.
ACTUALIZAR:
Como señala sv_in , puede usarlo event.originalEventpara obtener el objeto de evento original y establecer returnValuela propiedad en el original. Pero aún no lo he probado en mi IE8.
Mootools redefine preventDefault en objetos de evento. Entonces su código debería funcionar bien en todos los navegadores. Si no es así, entonces hay un problema con la compatibilidad con ie8 en mootools.
¿Probaste tu código en ie6 y/o ie7?
El doctor dice
Cada evento agregado con addEvent obtiene el método mootools automáticamente, sin la necesidad de instanciarlo manualmente.
pero en caso de que no sea así, quizás quieras intentarlo.
new Event(event).preventDefault();