Firefox 中的 Onchange 无需更改即可触发

Question

我有一个选择，为此设置了一个onchange事件。
问题是，仅在 Firefox 中(FF v. 12(，即使用户不单击任何选项，也会触发onchange事件;只需悬停该选项就足以触发它。

即：如果用户单击选择，将鼠标悬停在其中一个选项上，然后在选择外部单击，则选择的值会更改(即使显示的值不会更改(，从而触发事件。

如果已选择所选元素之一，则不会发生这种情况。行为或多或少与此Mozilla错误相同：https://bugzilla.mozilla.org/show_bug.cgi?id=265047

Answer 1

这肯定是 Firefox 中的一个错误，当没有定义选定的索引时，它会在悬停项目时分配选定的值和选定的索引。

虽然我无法修复该错误，但一种非常简单且有效的解决方法是将空和隐藏项目添加到列表中作为第一个项目并将其分配为所选项目。

例如：

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

用户不会看到任何更改，当您"清除"选择时，将所选索引分配为 0 而不是 -1，例如

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中工作。