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在大多数浏览器中都是全局变量。

ReferenceError：Firefox中未定义事件错误

2 个答案: