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

Question

Я сделал страницу для клиента, и я изначально работал в 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); 

    }); 


}); 

Answer 1

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

$('.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 вокруг собственного события объект. Обертка - это то, что нормализует поведение событий в браузерах. Если вы используете глобальную версию, вы этого не получите.

Answer 2

Это потому, что вы забыли передать в 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 является глобальной переменной в большинстве браузеров ,