3

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

即：如果用户单击选择，悬停选项之一，然后他在选择之外单击，则选择的值会更改（即使显示的值没有）因此触发事件。

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

4

1 回答 1

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");
    };
};

识别浏览器的功能取自this answer。

更新小提琴- 在 Firefox、Chrome、IE9 和 IE8 中工作。

于 2012-04-30T09:11:24.893 回答