web-dev-qa-db-ja.com

ReferenceError：イベントはFirefoxで定義されていないエラーです

クライアント用のページを作成しましたが、最初はChromeで作業していましたが、Firefoxで動作しているかどうかを確認するのを忘れていました。今、ページ全体がFirefoxで動作しないスクリプトに基づいているため、大きな問題があります。

これは、適切なページを非表示にして表示するrelを持つすべての「リンク」に基づいています。 Firefoxでこれが機能しない理由がわかりません。

たとえば、ページには#menuPage、#aboutPageなどのIDがあります。すべてのリンクにこのコードがあります：

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

    });


});
javascriptjqueryhtmlfirefox
101
Måns Dahlström

イベントハンドラー（の一部）を誤って宣言しています：

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

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


});

ハンドラーのパラメーターとなるには、「イベント」が必要です。 WebKitは、「イベント」にグローバルシンボルを使用するIEの古い動作に従いますが、Firefoxは動作しません。 jQueryを使用している場合、そのライブラリは動作を正規化し、イベントハンドラーにイベントパラメーターが渡されるようにします。

編集 —明確にするために：someパラメーター名を指定する必要があります。 eventを使用すると、目的が明確になりますが、e、cupcake、またはその他の名前を呼び出すことができます。

また、「ネイティブ」パラメータ（ChromeおよびIEおよびSafari）の代わりにjQueryから渡されるパラメータを使用する必要がある理由は、そのパラメータ（パラメータ）であることに注意してください。は、ネイティブイベントオブジェクトのjQueryラッパーです。ラッパーは、ブラウザー全体でイベントの動作を正規化するものです。グローバルバージョンを使用している場合は、取得できません。

132
Pointy

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はWord Eventではなく一般的に使用されます。

52
Mark Pieszak - Trilon.io