La fonction event.preventDefault () ne fonctionne pas dans IE

Voici mon code 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', '');
        }
    });
});

Dans tous les navigateurs sauf IE, cela fonctionne très bien. Mais dans IE, cela provoque une erreur. J'ai IE8 donc en utilisant son débogueur JavaScript, j'ai découvert que l' eventobjet n'a pas de preventDefaultméthode qui provoque l'erreur et donc le formulaire est envoyé. La méthode est prise en charge dans le cas de Firefox (que j'ai découvert en utilisant Firebug).

De l'aide?

dans IE, vous pouvez utiliser

event.returnValue = false;

pour obtenir le même résultat.

Et pour ne pas obtenir d'erreur, vous pouvez tester l'existence de preventDefault:

if(event.preventDefault) event.preventDefault();

Vous pouvez combiner les deux avec:

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

Si vous liez l'événement via la fonction addEvent de mootools, votre gestionnaire d'événements obtiendra un événement fixe (augmenté) passé en paramètre. Il contiendra toujours la méthode preventDefault ().

Essayez ce violon pour voir la différence dans la liaison d'événements. 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>

Pour tous les utilisateurs de jQuery , vous pouvez corriger un événement en cas de besoin. Supposons que vous avez utilisé HTML onclick = ".." et obtenez un événement spécifique à IE qui n'a pas preventDefault (), utilisez simplement ce code pour l'obtenir.

e = $.event.fix(e);

Après cela, e.preventDefault (); fonctionne bien.

Je sais que c'est un article assez ancien, mais je viens de passer du temps à essayer de faire fonctionner cela dans IE8.

Il semble qu'il y ait des différences dans les versions d'IE8 car les solutions publiées ici et dans d'autres threads ne fonctionnaient pas pour moi.

Disons que nous avons ce code:

$('a').on('click', function(event) {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
});

Dans ma preventDefault()méthode IE8 existe à cause de jQuery, mais ne fonctionne pas (probablement à cause du point ci-dessous), donc cela échouera.

Même si je définis la returnValuepropriété directement sur false:

$('a').on('click', function(event) {
    event.returnValue = false;
    event.preventDefault();
});

Cela ne fonctionnera pas non plus, car je viens de définir certaines propriétés de l'objet d'événement personnalisé jQuery.

La seule solution qui fonctionne pour moi est de définir la propriété returnValuede la variable globale event comme ceci:

$('a').on('click', function(event) {
    if (window.event) {
        window.event.returnValue = false;
    }
    event.preventDefault();
});

Juste pour le rendre plus facile pour quelqu'un qui tentera de convaincre IE8 de travailler. J'espère que IE8 mourra horriblement dans une mort douloureuse bientôt.

METTRE À JOUR:

Comme le souligne sv_in , vous pouvez utiliser event.originalEventpour obtenir l'objet d'événement d'origine et définir la returnValuepropriété dans celui d'origine. Mais je ne l'ai pas encore testé dans mon IE8.

Mootools redéfinit preventDefault dans les objets Event. Votre code devrait donc fonctionner correctement sur tous les navigateurs. Si ce n'est pas le cas, il y a un problème avec le support ie8 dans mootools.

Avez-vous testé votre code sur ie6 et / ou ie7?

Le doc dit

Chaque événement ajouté avec addEvent obtient automatiquement la méthode mootools, sans qu'il soit nécessaire de l'instaurer manuellement.

mais si ce n'est pas le cas, vous voudrez peut-être essayer

new Event(event).preventDefault();

if (e.preventDefault) {
    e.preventDefault();
} else {
    e.returnValue = false;
}

Testé sur IE 9 et Chrome.

Pour désactiver une touche du clavier après IE9, utilisez: e.preventDefault();

Pour désactiver une touche de clavier standard sous IE7 / 8, utilisez: e.returnValue = false;oureturn false;

Si vous essayez de désactiver un raccourci clavier (avec Ctrl, comme Ctrl+F), vous devez ajouter ces lignes:

try {
    e.keyCode = 0;
}catch (e) {}

Voici un exemple complet pour IE7 / 8 uniquement:

document.attachEvent("onkeydown", function () {
    var e = window.event;

    //Ctrl+F or F3
    if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
        //Prevent for Ctrl+...
        try {
            e.keyCode = 0;
        }catch (e) {}

        //prevent default (could also use e.returnValue = false;)
        return false;
    }
});

Référence: comment désactiver les raccourcis clavier dans IE7 / IE8

Voici une fonction que j'ai testée avec la version nocturne de jquery 1.3.2 et 09-18-2009. Faites-moi savoir vos résultats avec. Tout s'exécute bien à cette fin dans Safari, FF, Opera sur OSX. Il sert exclusivement à corriger un bogue IE8 problématique et peut avoir des résultats inattendus:

function ie8SafePreventEvent(e) {
    if (e.preventDefault) {
        e.preventDefault()
    } else {
        e.stop()
    };

    e.returnValue = false;
    e.stopPropagation();
}

Usage:

$('a').click(function (e) {
    // Execute code here
    ie8SafePreventEvent(e);
    return false;
})

preventDefaultest une norme répandue; utiliser un adhoc chaque fois que vous voulez être conforme aux anciennes versions d'IE est encombrant, mieux vaut utiliser un polyfill:

if (typeof Event.prototype.preventDefault === 'undefined') {
    Event.prototype.preventDefault = function (e, callback) {
        this.returnValue = false;
    };
}

Cela modifiera le prototype de l'événement et ajoutera cette fonction, une grande fonctionnalité de javascript / DOM en général. Vous pouvez maintenant l'utiliser e.preventDefaultsans problème.

return false dans votre écouteur devrait fonctionner dans tous les navigateurs.

$('orderNowForm').addEvent('submit', function () {
    // your code
    return false;
}

FWIW, au cas où quelqu'un reviendrait sur cette question plus tard, vous pourriez également vérifier ce que vous remettez à votre fonction de gestionnaire onKeyPress.

J'ai rencontré cette erreur lorsque j'ai transmis par erreur onKeyPress (this) au lieu de onKeyPress (event).

Juste autre chose à vérifier.

J'ai été aidé par une méthode avec une vérification de fonction. Cette méthode fonctionne dans IE8

if(typeof e.preventDefault == 'function'){
  e.preventDefault();
} else {
  e.returnValue = false;
}