javascript - Firefox 中的 onchange 被触发而不改变

Question

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

即:如果用户点击选择，将鼠标悬停在其中一个选项上，然后在选择外单击，则选择的值会发生变化(即使显示的值没有变化)，从而触发事件。

如果 select 的其中一个元素已被选中，则不会发生这种情况。该行为与此 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 中工作。