0

イベントに問題がある Firefox に関する約 15 の異なるスタック オーバーフローの質問を読みました。それらのどれも私の機能に密接に関係していませんでしたが、それは単純な問題だと思いました. 私は彼らの問題に対してうまくいったと思われるすべてを試しましたが、それらはすべて失敗しました.

私の問題は Firefox にあります。何も起こらず、コードの順序が原因です。順序は非常に重要です。そうしないと、複数のボタンが不要に追加されます。少なくとも、クリック機能に基づいてクラスを追加および削除しない理由を理解しています。私が理解していないのは、追加var event = event || window.event;して試したことif(!event) event = window.event;です。それらはすべて何もしないように見えるので、イベントがあった場所に window.event を配置しようとしましたが、これも機能しませんでした。

IE での私の問題です。これにより、少なくとも記事をクリックして展開することができますが、クリックするとボタンが追加されません。記事を閉じるボタンは生死に関係ないので、これは重要ではありません。

私のjQuery

function newsArticle() { // Articles Functionality
    $('.article').on('click', function() {
        var self = this;
        var button = $('<span />', {
            'class': 'close',
            text: 'Click to minimize article',
            on: {
                click: function (e) {
                    e.stopPropagation();
                    $(self).stop(true).toggleClass('fullArticle article');
                    $(this).remove();
                }
            }
        });
    if(!event) event = window.event;
    if($(event.target).is('.article')) {
        $(this).append(button);
    }
    else if($(event.target).parents().is('.article')) {
        $(this).append(button);
    }

    $(this).removeClass('article').addClass('fullArticle');
    });
}

newsArticle();

答え

function newsArticle() { // Articles Functionality
    $('.article').on('click', function(e) {
        var self = this;
        var button = $('<span />', {
            'class': 'close',
            text: 'Click to minimize article',
            on: {
                click: function (e) {
                    e.stopPropagation();
                    $(self).stop(true).toggleClass('fullArticle article');
                    $(this).remove();
                }
            }
        });
    if($(e.target).is('.article')) {
        $(this).append(button);
    }
    else if($(e.target).parents().is('.article')) {
        $(this).append(button);
    }

    $(this).removeClass('article').addClass('fullArticle');
    });
}

newsArticle();

jsfiddle

jsfiddle で問題が表示されない場合は、ライブ サイトで表示 -->サイト

一番下までスクロールすると、フッターの上に 4 つのタブがあり、[In the News] をクリックします。

他に何か必要な場合はお知らせください。この質問をして申し訳ありませんが、うまくいく答えを見つけることができませんでした。

4

1 に答える 1

4

jQuery を使用する場合、クロス ブラウザー チェック (if(!event) event = window.event;など) を行う必要はありません。ただし、イベント ハンドラーのパラメーターとしてイベントを受け入れる必要があります。

$('.article').on('click', function(event) {

e混乱を避けるために、慣習として使用したい：

$('.article').on('click', function(e) {
于 2013-10-03T15:55:52.717 に答える