ReferenceError: evento non definito errore in Firefox

Question

Ho creato una pagina per un client e inizialmente lavoravo in Chrome e ho dimenticato di controllare se funzionava in Firefox. Ora, ho un grosso problema perché l'intera pagina si basa su uno script che non funziona in Firefox.

Si basa su tutti i "link" che hanno un rel che porta a nascondersi e mostra la pagina giusta. Non capisco perché questo non funziona in Firefox.

Ad esempio le pagine hanno l'ID #menuPage, #aboutPage e così via. Tutti i collegamenti hanno questo codice:

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

Funziona perfettamente in Chrome e Safari.

Ecco il codice:

$(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); 

    }); 


}); 

Answer 1

Stai dichiarando (alcuni dei) i gestori di eventi in modo non corretto:

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

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


}); 

avete bisogno di "evento" per essere un parametro per i gestori. WebKit segue il vecchio comportamento di IE di utilizzare un simbolo globale per "evento", ma Firefox no. Quando si utilizza jQuery, tale libreria normalizza il comportamento e assicura che i gestori di eventi vengano passati al parametro dell'evento.

modifica — per chiarire: è necessario fornire qualche nome parametro; utilizzando event rende chiaro ciò che si intende, ma è possibile chiamarlo e o cupcake o qualsiasi altra cosa.

Nota anche che il motivo per cui probabilmente dovresti usare il parametro passato da jQuery al posto di quello "nativo" (in Chrome, IE e Safari) è che quello (il parametro) è un wrapper jQuery attorno all'evento nativo oggetto. Il wrapper è ciò che normalizza il comportamento degli eventi nei vari browser. Se si utilizza la versione globale, non si ottiene questo.

Answer 2

È perché si è dimenticato di passare in event nella funzione 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(); 
}); 

Su un lato nota, e è più comunemente usato in contrasto con la parola event dal Event è una variabile globale nella maggior parte dei browser .