ReferenceError: o evento não é um erro definido no Firefox

104

Fiz uma página para um cliente e inicialmente estava trabalhando no Chrome e esqueci de verificar se estava funcionando no Firefox. Agora, estou com um grande problema porque a página inteira é baseada em um script que não funciona no Firefox.

É baseado em todos os "links" que possuem um relque leva a ocultar e mostrar a página certa. Não entendo por que isso não está funcionando no Firefox.

Para páginas da instância tem o id #menuPage, #aboutPagee assim por diante. Todos os links possuem este código:

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

Está funcionando perfeitamente no Chrome e Safari.

Aqui está o 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);

    });


}); 
Måns Dahlström
fonte
2
Seria muito útil se você explicasse exatamente o que quer dizer quando diz que "não funciona". O que acontece? Erros? Layout ruim? Mau comportamento?
Pointy de

Respostas:

136

Você está declarando (alguns de) seus manipuladores de eventos incorretamente:

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

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


});

Você precisa de "evento" para ser um parâmetro para os manipuladores. O WebKit segue o antigo comportamento do IE de usar um símbolo global para "evento", mas o Firefox não. Quando você está usando jQuery, essa biblioteca normaliza o comportamento e garante que seus tratadores de evento recebam o parâmetro do evento.

editar - para esclarecer: você deve fornecer algum nome de parâmetro; usandoevent deixa claro o que você pretende, mas você pode chamá-lo eoucupcake ou qualquer outra coisa.

Observe também que o motivo pelo qual você provavelmente deve usar o parâmetro passado do jQuery em vez do "nativo" (no Chrome, IE e Safari) é que esse (o parâmetro) é um wrapper jQuery em torno do objeto de evento nativo. O wrapper é o que normaliza o comportamento do evento nos navegadores. Se você usar a versão global, não entenderá.

Pontudo
fonte
Muito obrigado. meteor.js usa muitos eventos vars. function () {.... sem passar o evento ainda funciona no Chrome e no Safari. no entanto, o firefox iria falhar.
Jimmy MG Lim
54

É porque você se esqueceu de passar eventpara a clickfunção:

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

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

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

Em uma nota lateral, eé mais comumente usado em oposição à palavra, eventpois Eventé uma variável global na maioria dos navegadores.

Mark Pieszak - Trilon.io
fonte
3
... exceto no Firefox, é claro! Não custa nada usar o nome "evento" para o parâmetro, pois não é uma palavra reservada nem nada.
Pointy de
1
É verdade, acho que acabei ede aprender no jQuery! @Pointy
Mark Pieszak - Trilon.io