24

Firefoxはタグのクリックイベントを<select>Webkit/IEとは異なる方法で処理することに気付きましたが、この違いを解決する理由や方法がわかりませんでした。

具体的には、Webkit / IEは、次のグラフに示すように、「選択」をクリックすることと、ドロップダウンの1つをクリックすることの両方 の組み合わせとして、上の各クリックイベントを考慮します。<select><option>

ファーストクリック：

最初のクリック

セカンドクリック：

2回目のクリック

Webkit / IEでは、クリックイベントは、両方のクリックが行われた後にのみ発生します。

ただし、Firefoxでは、<select>タグの最初のクリックはクリックイベントと見なされ、選択する2番目のクリックは別のクリック<option>イベントと見なされます。したがって、同じ操作でWebkit / IEの1つと比較して、Firefoxでは2つの クリックイベントが発生しました。

ここで、次のように仮定して、コード例でそれを示します。（JSfiddle link）

<select id="sel">
    <option>one</option>
    <option>two</option>
    <option>three</option>​
</select>
<script>
function select() {
    $("#sel").one("click", function(event) {
        console.log('mouse down!');
        $("#sel").one('click', function() {
            console.log('mouse down again!');
            $("#sel").off();
            select();
        });
    });
}
$(document).ready(function() {
    select();
});
</script>

Webkit / IEでは、上記のグラフに示されている一連の操作を（初めて）実行すると、次の出力が得られます。

mouse down!

Firefoxでは、次のようになります。

mouse down!
mouse down again!

なぜそうなのか、どうすれば修正できますか？

編集：jQueryを使用せずに純粋なJavaScriptを試してみましたが、結果は同じままです。

編集2：もう少しコンテキスト、私は最初にこの質問に答えました：IEとクロームで機能しないオプションタグをクリックして、私の答えの賞金を獲得しました。しかし、opが後で指摘したように、私のソリューションはFirefoxでは機能しませんでした。私はこの問題を解決するためにさらに深く掘り下げることに決めたので、この質問が出され、その解決策から得た50の報奨金に報いることができます。基本的に、問題は、同じであっても、選択が行われるたびにイベントをトリガーする選択メニューを作成することです。これは、ブラウザの実装が異なるため、可能であれば、予想よりも難しいことが証明されています。

編集3：私は完全に知ってonchangeいますが、ここでの質問は、onchange注意深く読んだかどうかについてではありません。同じ選択であっても、各選択でイベントをトリガーする必要があります（トリガーされません）onchange。

4

3 に答える 3

9

なぜonchangeイベントで作業しないのですか?

$("#sel").change(function(){
    $('body').append("<br/> Option changed");
});

ここにフィドルがあります

ただし、選択が同じ場合でも発生しません。回避策は、別の回答で提案されているように、Chosen のようなプラグインを使用することです。

編集: 哲学的に言えばselect、要素はそのような機能を意図したものではありません。タグchangeに関連するほとんどのユースケースでは、イベントで十分です。select必要な機能、つまり、ユーザーが要素を選択したかどうか (変更されていない場合でも) を知ることは、selectタグの機能モデルに適合しません。論理的selectには、選択を変更したくない場合、誰も要素をクリックしたくないでしょう。

要件に合わせて、select タグのほかにGo を指定し、要素のイベントで通常行うのと同じ関数を呼び出すことができます。それ以外の場合は、 代わりにホバーカード/ホバー メニューを指定します。buttononclickonchangeselectselect

于 2012-04-18T12:12:02.590 に答える
4

多くの実験と検索を行った結果、ブラウザごとに異なるこの特定の動作を解決するのは、可能であれば解決するのが難しいと確信し始めています。

しかし、タグを使用する代わりに、jQuery UI選択メニューまたはChosenを使用して選択メニューを作成することで、反対側から問題を解決できることに気付きました。<select>このようにして、テストしたすべてのブラウザーで一貫性のあるclickイベント<ul>またはタグが発生します。<li>

于 2012-04-15T07:28:39.943 に答える
2

本質的に、問題は選択が行われるたびにイベントをトリガーする選択メニューを作成することです。

これは技術的には（ある程度）それを行いますが、FFではクリックして開くときとクリックして閉じるときにトリガーされます（実際にはワンクリックで実行でき、SafariとFirefoxでまったく同じことができます）。でも同じ事件です。(クリックトリガーが発生する$('#sel'));

$("#sel").click(function(event) {
    if($(event.target).is('option')) {
        $(this).closest('select').click();
        return true;
    }
    console.log(event.target);
});

私がそれを「ある程度」行うと言う理由は、タブを押して矢印キーを使用してドロップダウンを選択すると、処理されないためです。同じアイテムを選択してもイベントを発生させる必要がある場合は、別の方法で行う必要があると思います。開発者としての私にとって、これが私のプロジェクトである場合、タブで選択ボックスに移動し、マウスに触れずにアイテムを選択すると、それが機能しないことは受け入れられません (つまり、ユーザーが私のサイトに来て対話する場合)マウスのない選択ボックスを使用すると、彼がすべきことを知らないことさえ実行されず、おそらくすべてが機能しなくなるなど）。

仕事に取り掛かるために一日中いじることはできます.click()が、元の目標を達成したとしても、それは本当の解決策ではありません. (ああ、 Chrome では何も起動できませんでした)。

コメントで言ったように、選択とのやり取りをどのように処理するかに関係していると思います。まるで Safari の select が実際にはページ上にないかのように感じます... 並べ替えによって、<option>クリックすると要素のリストのように機能して見えるこのきれいな要素が作成されますが、そうではありません。おそらく、最初にクリックしたときに起動しないのはなぜでしょう。Webkit は、クリックしてもそれを「実際の」要素として処理せず、「実際の」オプションと対話することなく、閉じるときに選択をクリックするだけです。

HTML を変更することが唯一の方法かもしれません (Chosen のように)。皮肉なことに、一部の Chosen 要素 (ドロップダウンのように見えるもの) はタブで選択できません... 少なくともデモ ページでは選択できません(「標準選択」を参照)。しかし、少なくともそれをクリックするように強制されるため、マウス関連のイベントがトリガーされます。

とにかく、私は未解決の問題が嫌いですが、すべてのブラウザーで.click()作業を開始するための実際の解決策はないよう<select>です。代替の解決策に焦点を合わせ始める必要があります。ごめん ：-（

于 2012-04-20T03:54:32.117 に答える