web-dev-qa-db-fra.com

ReferenceError: l'événement n'est pas une erreur définie 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 rel qui conduit à cacher et à montrer la bonne page. Je ne comprends pas pourquoi cela ne fonctionne pas dans Firefox.

Par exemple, les pages ont l'id #menuPage, #aboutPage et 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);

    });


});
javascriptjqueryhtmlfirefox
103
Måns Dahlström

Vous déclarez (certains) 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();


});

"Event" doit être un paramètre pour les gestionnaires. WebKit suit l'ancien comportement d'IE consistant à utiliser un symbole global pour "événement", mais pas Firefox. Lorsque vous utilisez jQuery, cette bibliothèque normalise le comportement et garantit que le paramètre event est transmis à vos gestionnaires d'événements.

edit - à préciser: vous devez fournir certains nom du paramètre; utiliser event précise ce que vous voulez, mais vous pouvez l'appeler e ou cupcake ou autre chose.

Notez également que la raison pour laquelle vous devriez probablement utiliser le paramètre transmis par jQuery à la place du paramètre "natif" (dans Chrome et IE et Safari) est celle-là (le paramètre) est un wrapper jQuery autour de l'objet événement natif. Le wrapper est ce qui normalise le comportement des événements entre navigateurs. Si vous utilisez la version globale, vous ne l'obtenez pas.

134
Pointy

C'est parce que vous avez oublié de passer event dans la fonction click:

$('.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 de côté, e est plus couramment utilisé par opposition au mot event puisque Event est une variable globale dans la plupart des navigateurs.

53
Mark Pieszak - Trilon.io