La fonction event.preventDefault () ne fonctionne pas dans IE
-
05-07-2019 - |
Question
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
ne possède pas de méthode preventDefault
qui provoque 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).
Avez-vous de l'aide?
La solution
dans IE, vous pouvez utiliser
event.returnValue = false;
pour obtenir le même résultat.
Et pour ne pas avoir 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);
Autres conseils
Si vous liez l'événement par le biais de 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énement. 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.
Je sais que c'est un article assez ancien, mais je viens de passer un peu de temps à essayer de faire fonctionner ce travail dans IE8.
Il semble y avoir quelques différences dans les versions d'IE8, car les solutions publiées ici et dans d'autres discussions ne m'ont pas fonctionné.
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 mets la propriété returnValue
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 une propriété de l'objet d'événement personnalisé jQuery.
La seule solution qui fonctionne pour moi consiste à définir la propriété returnValue
de la variable globale événement
comme suit:
$('a').on('click', function(event) {
if (window.event) {
window.event.returnValue = false;
}
event.preventDefault();
});
Simplement pour faciliter la tâche de quelqu'un qui tentera de convaincre IE8 de travailler. J'espère que IE8 mourra atrocement dans une mort douloureuse bientôt.
UPDATE:
Comme le sv_in , vous pouvez utiliser event.originalEvent
pour obtenir l'original. objet event et définissez la propriété returnValue
dans l’original. 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 de support avec 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 pouvez 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 normale sous IE7 / 8, utilisez: e.returnValue = false;
ou ou 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 construction nocturne de jquery 1.3.2 et 09-18-2009. Faites-moi savoir vos résultats avec elle. Tout fonctionne bien à cet égard dans Safari, FF, Opera sur OSX. C’est exclusivement pour corriger 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();
}
Utilisation:
$('a').click(function (e) {
// Execute code here
ie8SafePreventEvent(e);
return false;
})
preventDefault
est une norme répandue. Il est fastidieux d’utiliser un formulaire spécial chaque fois que vous souhaitez vous conformer aux anciennes versions d’IE. Il est préférable d’utiliser un polyfill:
if (typeof Event.prototype.preventDefault === 'undefined') {
Event.prototype.preventDefault = function (e, callback) {
this.returnValue = false;
};
}
Ceci modifiera le prototype de l'événement et ajoutera cette fonction, une fonctionnalité intéressante de javascript / DOM en général. Vous pouvez maintenant utiliser e.preventDefault
sans 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 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.
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;
}