Error de referencia: evento no definido en Firefox

Hice una página para un cliente e inicialmente estaba trabajando en Chrome y olvidé comprobar si funcionaba en Firefox. Ahora, tengo un gran problema porque toda la página se basa en un script que no funciona en Firefox.

Se basa en todos los “enlaces” que tienen un rel que lleva a ocultar y mostrar la página correcta. No entiendo por qué esto no funciona en Firefox.

Por ejemplo, las páginas tienen el ID #menuPage , #aboutPage , etc. Todos los enlaces tienen este código:

 Velkommen 

Funciona perfectamente en Chrome y Safari.

Aquí está el código:

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

Estás declarando (algunos de) tus controladores de eventos incorrectamente:

 $('.menuOption').click(function( event ){ // <---- "event" parameter here event.preventDefault(); var categories = $(this).attr('rel'); $('.pages').hide(); $(categories).fadeIn(); }); 

Necesita "evento" para ser un parámetro para los controladores. WebKit sigue el antiguo comportamiento de IE de usar un símbolo global para "evento", pero Firefox no lo hace. Cuando usa jQuery, esa biblioteca normaliza el comportamiento y garantiza que sus controladores de eventos pasen el parámetro de evento.

editar - para aclarar: debe proporcionar algún nombre de parámetro; using event aclara lo que pretendes, pero puedes llamarlo e o cupcake o cualquier otra cosa.

Tenga en cuenta también que la razón por la que probablemente deba usar el parámetro pasado desde jQuery en lugar del "nativo" (en Chrome e IE y Safari) es que ese (el parámetro) es un contenedor jQuery alrededor del objeto de evento nativo. El contenedor es lo que normaliza el comportamiento del evento en los navegadores. Si usa la versión global, no la obtiene.

Es porque olvidó pasar el event a la función de 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(); }); 

En una nota al margen, e es más comúnmente utilizado en comparación con el event palabra ya que el Event es una variable global en la mayoría de los navegadores.