ReferenceError: l'événement n'est pas défini erreur dans Firefox

J'ai créé une page pour un client et je travaillais initialement dans Chrome et j'ai oublié de vérifier si cela fonctionnait dans Firefox. Maintenant, j'ai un gros problème car toute la page est basée sur un script qui ne fonctionne pas dans Firefox.

Il est basé sur tous les «liens» qui ont un relqui conduit à cacher et à afficher la bonne page. Je ne comprends pas pourquoi cela ne fonctionne pas dans Firefox.

Par exemple, les pages ont l'identifiant #menuPage, #aboutPageet ainsi de suite. Tous les liens ont ce code:

<a class="menuOption" rel='#homePage' href="#">Velkommen</a> 

Cela fonctionne parfaitement dans Chrome et Safari.

Voici le code:

$(document).ready(function(){

//Main Navigation


$('.menuOption').click(function(){

  event.preventDefault();
  var categories = $(this).attr('rel');
  $('.pages').hide();
  $(categories).fadeIn();


});

// HIDES and showes the right starting menu
    $('.all').hide();
    $('.pizza').show();


// Hides and shows using rel tags in the buttons    
    $('.menyCat').click(function(event){
        event.preventDefault();
        var categori = $(this).attr('rel');
        $('.all').hide();
        $(categori).fadeIn();
        $('html,body').scrollTo(0, categori);

    });


}); 

Vous déclarez (certains de) vos gestionnaires d'événements de manière incorrecte:

$('.menuOption').click(function( event ){ // <---- "event" parameter here

    event.preventDefault();
    var categories = $(this).attr('rel');
    $('.pages').hide();
    $(categories).fadeIn();


});

Vous avez besoin de "event" comme paramètre pour les gestionnaires. WebKit suit l'ancien comportement d'IE consistant à utiliser un symbole global pour «événement», mais Firefox ne le fait pas. Lorsque vous utilisez jQuery, cette bibliothèque normalise le comportement et garantit que vos gestionnaires d'événements reçoivent le paramètre d'événement.

modifier - pour clarifier: vous devez fournir un nom de paramètre; en utilisant eventAffirme clairement ce que vous avez l' intention, mais vous pouvez l' appeler eou cupcakeou quoi que ce soit d' autre.

Notez également que la raison pour laquelle vous devriez probablement utiliser le paramètre transmis depuis jQuery au lieu du paramètre "natif" (dans Chrome, IE et Safari) est que celui-ci (le paramètre) est un wrapper jQuery autour de l'objet événement natif. L'encapsuleur est ce qui normalise le comportement des événements dans les navigateurs. Si vous utilisez la version globale, vous ne comprenez pas cela.

C'est parce que vous avez oublié de passer eventdans la clickfonction:

$('.menuOption').on('click', function (e) { // <-- the "e" for event

    e.preventDefault(); // now it'll work

    var categories = $(this).attr('rel');
    $('.pages').hide();
    $(categories).fadeIn();
});

Sur une note latérale, eest plus couramment utilisé par opposition au mot eventcar il Events'agit d'une variable globale dans la plupart des navigateurs.