1

私は携帯サイトを開発しています。Jquery モバイルと iscroll プラグインを使用しています。すべてがクロムで正常に動作します。しかし、Firefox をチェックしているときに、要素用に記述された:active css スタイルが機能していないことがわかりました。

ここにフィドルがあります http://jsfiddle.net/zq5AW/

アクティブな効果はクロムでは機能しますが、Firefox では機能しません。

しかし、jquery.mobile.iscrollview-min.js インクルード行を削除したとき。firefoxでも動き始めました。誰でも修正を提案できますか？

注：グーグルで同じ質問が見つかりました

https://groups.google.com/forum/?fromgroups=#!topic/iscroll/lqPomh3y-TU

しかし、答えはありませんでした。

4

2 に答える 2

2

Mithunsatheesh さん、jQuery と jQuery Mobile の 2 つのライブラリで競合が発生しています。同時に 2 つのライブラリをロードする必要がありますか?

ライブラリをロードする方法で順序を変更すると、すべてが機能し、目的の結果が得られます。

実施例

それ以外に、jQueryを使用して目的の効果を得るという別の解決策を提供できます。他に機能する可能性は見当たりません。

$(document).ready(function() {
    $("p").mousedown(function() {
        $(this).addClass('hovered');
    }).mouseup(function() {
        $(this).removeClass('hovered');
    });
});

実施例2

更新しました：

あなたの最後のコメントを参照して、これがあなたのための私の最終的な解決策です：

$(document).ready(function() {
    $("p").mousedown(function() {
        hovered = true;
        $(this).addClass('hovered');
    });
    $(document).mouseup(function() {
        if (hovered === true) {
            $("p").removeClass('hovered');
            hovered = false;
        }
    });
});

実施例3

于 2012-09-13T08:14:59.963 に答える
2

問題の原因を特定できればいいのですが、できません。:active問題についての私の理解は、その JavaScript ファイル内の何かが、通常は疑似クラスをトリガーするデフォルトのブラウザー アクションを妨げているということです。

マウスダウン/マウスアップ時に要素にクラスを追加および削除することで、これを回避できます

CSS

.act { color:#000; }
.act:active, .active { color:#FFF; }​

JS

$('.act').mousedown(function() {
    $(this).addClass('active');
});

$('.act').mouseup(function() {
    $(this).removeClass('active');
});

これも機能するフィドルです： http://jsfiddle.net/zq5AW/3/

于 2012-09-13T15:32:55.607 に答える