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

Firefox中的Onchange无需更改即触发

1 个答案: