ReferenceError:Firefox中未定义事件错误

Question

我为客户创建了一个页面,我最初在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);

    });


}); 

Answer 1

您错误地声明(某些)您的事件处理程序:

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

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


});

您需要"event"作为处理程序的参数.WebKit遵循IE使用全局符号"事件"的旧行为,但Firefox没有.当您使用jQuery时,该库会规范化行为并确保您的事件处理程序传递事件参数.

编辑 - 澄清:你必须提供一些参数名称; 使用event让您想清楚什么,但你可以把它叫做e或cupcake或其他任何东西.

另请注意,您可能应该使用从jQuery而不是"native"(在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在大多数浏览器中它是一个全局变量.