3

onchangeイベントが設定されているselectがあります。
問題は、Firefoxのみ（FF v。12）でonchange、ユーザーがオプションをクリックしなくてもイベントがトリガーされることです。オプションにカーソルを合わせるだけで、それをトリガーできます。

つまり、ユーザーが選択をクリックし、オプションの1つにカーソルを合わせてから、選択の外側をクリックすると、選択の値が変更され（表示された値が変更されない場合でも）、イベントがトリガーされます。

selectの要素の1つがすでに選択されている場合、これは発生しません。動作は、このMozillaバグとほぼ同じです： https ：//bugzilla.mozilla.org/show_bug.cgi？id = 265047

4

1 に答える 1

1

これは確かにFirefoxのバグであり、選択されたインデックスが定義されていない場合に、アイテムにカーソルを合わせると選択された値と選択されたインデックスが割り当てられます。

バグを修正することはできませんが、非常に簡単で機能する回避策の1つは、空の非表示のアイテムをリストに追加して最初のアイテムにし、それを選択したアイテムとして割り当てることです。

例えば：

<select id="mySelect">
    <option value="" style="display: none;"></option>
    <option value="1">first</option>
    <option value="2">second</option>
</select>

ユーザーには変更が表示されないため、選択を「クリア」するときに、選択したインデックスを-1ではなく0に割り当てます。

var oDDL = document.getElementById("mySelect");
oDDL.selectedIndex = 0;

ライブテストケース-Firefoxでも正しく動作するようになりました。

更新-上記のコードは、最初の空のオプションがまだ表示されているため、IE8では正しく機能していません。これを解決するには、ブラウザがFirefoxでない場合に、それをサポートするすべてのブラウザでオプションを削除するだけで済みます。更新されるコードは次のとおりです。

navigator.sayswho = (function(){
    var N = navigator.appName, ua= navigator.userAgent, tem;
    var M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if (M && (tem = ua.match(/version\/([\.\d]+)/i)) != null) M[2] = tem[1];
    M = M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];
    return M;
})();

window.onload = function() {
    var oDDL = document.getElementById("mySelect");
    oDDL.selectedIndex = 0;
    var blnFirefox = (navigator.sayswho[0].toLowerCase().indexOf("firefox") >= 0);
    if (!blnFirefox && oDDL.remove) {
        oDDL.remove(0);
        oDDL.selectedIndex = -1;
    }
    oDDL.onchange = function() {
        alert("hello");
    };
};

ブラウザを識別する機能は、この回答から取得されました。

更新されたフィドル-Firefox、Chrome、IE9、IE8で動作します。

于 2012-04-30T09:11:24.893 に答える