ReferenceError: событие не определено, ошибка в Firefox

Я сделал страницу для клиента, и сначала я работал в Chrome и забыл проверить, работает ли он в Firefox. Теперь у меня большая проблема, потому что вся страница основана на скрипте, который не работает в Firefox.

Он основан на всех «ссылках», relкоторые ведут к скрытию и отображению нужной страницы. Я не понимаю, почему это не работает в Firefox.

Например страницы имеют идентификатор #menuPage, #aboutPageи так далее. Все ссылки имеют этот код:

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

Он отлично работает в Chrome и Safari.

Вот код:

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

    });


}); 

Вы неправильно объявляете (некоторые из) обработчики событий:

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

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


});

Вам нужно, чтобы "событие" было параметром для обработчиков. WebKit следует старому поведению IE по использованию глобального символа для «события», но Firefox этого не делает. Когда вы используете jQuery, эта библиотека нормализует поведение и гарантирует, что вашим обработчикам событий будет передан параметр события.

править - уточнить: вы должны предоставить некоторое имя параметра; используя eventпроясняет то , что вы собираетесь, но вы можете назвать это eили cupcakeили что - нибудь еще.

Также обратите внимание, что причина, по которой вам, вероятно, следует использовать параметр, переданный из jQuery, вместо «собственного» (в Chrome, IE и Safari), заключается в том, что этот параметр (параметр) является оболочкой jQuery вокруг собственного объекта события. Оболочка - это то, что нормализует поведение событий в браузерах. Если вы используете глобальную версию, вы этого не получите.

Это происходит потому , что вы забыли передать eventв 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();
});

Кстати, eчаще используется вместо этого слова, eventтак Eventкак в большинстве браузеров это глобальная переменная.