ReferenceError：Firefox中未定义事件错误

我已经为客户创建了一个页面，最初是在Chrome中工作，却忘记了检查它是否在Firefox中工作。现在，我遇到了一个大问题，因为整个页面基于无法在Firefox中运行的脚本。

它基于所有具有rel导致隐藏和显示正确页面的“链接” 。我不明白为什么这在Firefox中不起作用。

例如，页面具有id #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参数。

编辑 -澄清：您必须提供一些参数名称；使用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在大多数浏览器中的全局变量。