web-dev-qa-db-fra.com

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 bien. Mais dans IE, cela provoque une erreur. J'ai IE8 donc en utilisant son débogueur JavaScript, j'ai découvert que l'objet event n'a pas de méthode preventDefault qui cause l'erreur et que le formulaire est soumis. La méthode est supportée dans le cas de Firefox (que j'ai découvert en utilisant Firebug).

De l'aide?

javascriptinternet-explorereventsmootoolspreventdefault
199
sv_in

dans IE, vous pouvez utiliser

event.returnValue = false;

pour obtenir le même résultat.

Et pour ne pas avoir d'erreur, vous pouvez vérifier l'existence de preventDefault:

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

Vous pouvez combiner les deux avec:

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

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 tant que paramètre. Il contiendra toujours la méthode preventDefault ().

Essayez ce violon pour voir la différence de 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 si nécessaire. Dites que vous avez utilisé HTML onclick = ".." et obtenez un événement spécifique à IE qui manque de preventDefault (); utilisez simplement ce code pour l'obtenir.

e = $.event.fix(e);

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

23
oldwizard

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

Il semble qu'il y ait quelques différences entre 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 méthode IE8 preventDefault() existe à cause de jQuery, mais ne fonctionne pas (probablement à cause du point ci-dessous), donc cela échouera.

Même si je règle directement la propriété returnValue sur false:

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

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

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

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

Simplement pour faciliter la tâche de quelqu'un qui essaiera de convaincre IE8 de fonctionner. J'espère que IE8 mourra atrocement dans une mort douloureuse bientôt.

UPDATE:

Comme sv_in indique, vous pouvez utiliser event.originalEvent pour obtenir l'objet d'événement d'origine et définir la propriété returnValue dans celle d'origine. Mais je ne l'ai pas encore testé dans mon IE8.

11
muffir

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'instance manuelle.

mais dans le cas contraire, vous voudrez peut-être essayer

new Event(event).preventDefault();
6
Alsciende
if (e.preventDefault) {
    e.preventDefault();
} else {
    e.returnValue = false;
}

Testé sur IE 9 et Chrome.

5
RolandoCC

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

Pour désactiver une touche de clavier normale sous IE7/8, utilisez: e.returnValue = false; ou return 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

3
JBE

Voici une fonction que j'ai testée avec les versions nocturnes de jquery 1.3.2 et 09-18-2009. Faites-moi savoir vos résultats avec elle. Tout fonctionne bien à cet effet dans Safari, FF, Opera sur OSX. Il est exclusivement destiné à la correction d'un bogue problématique dans IE8 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;
})
2
user175353

preventDefault est une norme répandue; Utiliser un adhoc chaque fois que vous voulez être en conformité avec les anciennes versions de IE est fastidieux, il vaut mieux 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 fonctionnalité intéressante de javascript/DOM en général. Maintenant, vous pouvez utiliser e.preventDefault sans problème.

2
EliuX

return false dans votre auditeur devrait fonctionner dans tous les navigateurs.

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

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

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

Juste quelque chose d'autre à vérifier.

0
Kirby L. Wallace

J'ai été aidé par une méthode avec un contrôle de fonction. Cette méthode fonctionne dans IE8

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