jQuery événement.preventDefault() ne fonctionne pas sous Firefox (JSFiddle inclus)

C'est une sorte de semblable en double pour certains autres ici, mais je pense que je suis en utilisant event.preventDefault() correctement dans ce cas.

Voici un JSFiddle vous pouvez voir le code avec: http://jsfiddle.net/SeEw2/2/

Fondamentalement, cliquez sur le bouton "Soumettre".

Dans google Chrome: Rien ne se passe - réponse correcte.

Dans Firefox: Page s'actualise, oh non!

Alors pourquoi est le recharger la page dans Firefox et pas de google Chrome? J'ai été Firebugging et pas d'erreurs venir en soit...

  • La raison pour laquelle cela fonctionne sur Chrome, c'est que Chrome jette un os à des sites qui sont IE-dépendante, par le remplissage de window.event avec l'événement en cours avant le déclenchement de gestionnaires. (Et une référence de votre event -- parce que vous avez oublié de l'inclure dans votre signature du gestionnaire d'événements, comme ClemDesm a été le premier à souligner - signifie que vous êtes en retard sur window.event.) Firefox ne jette aucun de ces os-à-dire le code spécifique.
  • Très instructif, merci T. J. - je ne savais pas que.
  • Merci de poster le code en question, pas dans jsFiddle.
InformationsquelleAutor Jack | 2011-01-03
  1. 98

    La variable event dans votre code n'est pas initialisé.

    http://jsfiddle.net/SeEw2/4/

    extrait :

     $('#ajaxsearch').click(function(event) {

        //Stop the Search input reloading the page by preventing its default action
        event.preventDefault();
    • Aha! Merci ClemDesm, c'est bête de manquer ça. Maintenant, il semble montrer vers le haut dans Firebug la Console d'Erreur de toute façon... hmmm 🙂
    • Je me demande pourquoi il fonctionne dans chrome... eu exactement le même problème et ce qu'il est corrigé.
    • Vous m'avez sauvé, moi aussi a l'aide de la fonction(e) et d'être absente, Merci beaucoup !
    • "Comment est-ce que cette réponse va m'aider?" ou alors j'ai pensé. Et puis j'ai regardé mon code .... Btw, la dernière version de FF (66.0.2) n'a plus la question et ne tiendrait pas compte de ce juste, comme le Chrome, mais 60.x.x n'a toujours.
    InformationsquelleAutor Shikiryu
  2. 9

    Ah j'ai eu un problème similaire dans le passé. Plutôt que de l'événement.preventDefault() essayer de passer l'événement:

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

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

    Je sais qu'il dit IE, mais je n'ai jamais eu un problème avec elle depuis =]

    InformationsquelleAutor Dartoxian
  3. 1

    Parce que votre ne passe pas de l'objet d'événement comme function(event), mais ma question est pourquoi même aller à travers tout cela, quand vous pouvez faire la type="button" et onclick transmettre les valeurs? Pour l'essentiel, que ce que vous faites avec l'ensemble de ce processus.

    • Hey, pourquoi n'ai-je pas pensé?! Cheers! Je suis en train de rouler avec une type="button". Je ne suis pas en utilisant onclick cependant, puisque dans la plus grande étendue de choses, il est plus pratique de faire comme ça.
    • J'ai peut-être tort (et il n'a pas un rapport avec la question) mais je me demandais : est-ce un type="button" reconnaître le entrée clavier tactile soumettre? Ne peut pas vraiment tester sur jsfiddle, ne peut pas tester une autre façon @ mon travail, et je suis curieux 🙂
    • Lorsque vous appuyez sur Entrée, avec le focus sur la zone de texte, il ne le fait pas. Mais en appuyant sur Entrée, avec l'accent (probablement à Onglets) sur le Bouton lui-même, oui, c'est fait reconnaître comme un soumettre et preventDefault() se produit. C'est ce que tu veux dire? 🙂
    • OK, de préciser - dans l'ordre pour obtenir une Entrée pour travailler à la fois sur la saisie de texte et sur le bouton Soumettre, j'ai attribué l'id #ajaxsearch à la <form> balise, puis a couru $('#ajaxsearch').submit([...] - qui fonctionne avec deux d'entre eux.
    • Ouais, donc c'est pas vraiment convivial à mon humble avis. Un normal personne ne vous focalisez pas sur le bouton, puis appuyez sur entrée soumettre un formulaire. Ensuite, je serai curieux de savoir si un bouton et un .submit() gestionnaire de le faire. Il semble comme une meilleure solution dans ce cas (pas de action dans le form (BTW, pourquoi utilisez-vous un form alors 😉 ?) De toute façon avec JS désactivé, aucun secours ici.
    InformationsquelleAutor Babiker
  4. 1

    Au lieu de regarder pour un événement click sur le bouton "soumettre", pourquoi ne pas utiliser le $(formulaire).soumettre gestionnaire?

    Aussi longtemps que vous avez "return false" à la fin de la gestionnaire, la page ne recharge pas.

    • C'est ce que j'utilise maintenant, semble être une meilleure façon de le faire. Merci!
    InformationsquelleAutor CamelBlues
  5. 0

    Je l'ai résolu de cette façon, en raison de mon code est un peu différente de ce qui peut être utile pour d'autres personnes. Mon code ressemble à ceci.

    <form id="enrollstudentform" onsubmit="return enrollStudents()">
    ...
</form>

    Ma fonction js ressemblait

    function enrollStudents() {
    //Stop Form.
    event.preventDefault();
    //Other code
}

    J'ai dû passer le paramètre de l'événement dans l'appel de fonction et de le recevoir dans la fonction.

    <form id="enrollstudentform" onsubmit="return enrollStudents(event)">
    ...
</form>

    code js:

    function enrollStudents(event) {
    //Stop Form.
    event.preventDefault();
    //Other code
}

    J'espère que cela aide.

    • Cela ressemble à la même réponse que Shikiryu a donné 5 ans plus tôt ....
    InformationsquelleAutor Andres Ramos