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;

Live test case - 现在即使在 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");
    };
};

识别浏览器的函数取自this answer。

Updated fiddle - 在 Firefox、Chrome、IE9 和 IE8 中工作。