ReferenceError:在Firefox中没有定义错误

I've made a page for a client and I initially was working in Chrome and forgot to check if it was working in Firefox. Now, I have a big problem because the whole page is based upon a script that doesn't work in Firefox.

我为一个客户做了一个页面，最初我在Chrome上工作，但忘记检查它是否在Firefox上工作。现在，我有一个大问题，因为整个页面是基于一个在Firefox中不能工作的脚本。

It's based on all "links" that have a rel that leads to hiding and showing the right page. I don't understand why this isn't working in Firefox.

它基于所有的“链接”，这些链接会导致隐藏和显示正确的页面。我不明白为什么这在Firefox中行不通。

For instance pages have the id #menuPage, #aboutPage and so on. All links have this code:

例如，页面有id #menuPage、#about页面等等。所有链接都有以下代码:

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

It's working perfectly in Chrome and Safari.

它在Chrome和Safari上运行良好。

Here is the code:

这是代码:

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

    });


});

2 个解决方案

#1

113

You're declaring (some of) your event handlers incorrectly:

您正在(一些)不正确地声明事件处理程序:

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

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


});

You need "event" to be a parameter to the handlers. WebKit follows IE's old behavior of using a global symbol for "event", but Firefox doesn't. When you're using jQuery, that library normalizes the behavior and ensures that your event handlers are passed the event parameter.

您需要“event”作为处理程序的参数。WebKit遵循IE使用全局符号表示“事件”的*惯，但Firefox没有。在使用jQuery时，该库将行为规范化，并确保传递事件处理程序的事件参数。

edit — to clarify: you have to provide some parameter name; using event makes it clear what you intend, but you can call it e or cupcake or anything else.

编辑-澄清:您必须提供一些参数名称;使用event可以清楚地表明您的意图，但您可以将其称为e或杯形蛋糕或其他任何东西。

Note also that the reason you probably should use the parameter passed in from jQuery instead of the "native" one (in Chrome and IE and Safari) is that that one (the parameter) is a jQuery wrapper around the native event object. The wrapper is what normalizes the event behavior across browsers. If you use the global version, you don't get that.

还要注意，您可能应该使用从jQuery传入的参数而不是“本机”参数(在Chrome和IE和Safari中)的原因是，这个参数是围绕本机事件对象的jQuery包装器。包装器是跨浏览器规范化事件行为的工具。如果你使用全局版本，你不会得到它。

#2

It is because you forgot to pass in event into the click function:

因为您忘记将事件传递到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();
});

On a side note, e is more commonly used as opposed to the word event since Event is a global variable in most browsers.

另一方面，e比event更常用，因为在大多数浏览器中，event是一个全局变量。

#1

113