Firefox中的Onchange被触发而不会改变 [英] Onchange in Firefox is triggered without changing

问题描述

我有一个select，为此设置了 onchange 事件。

问题是，在Firefox中（FF v。12），即使用户没有点击任何选项，也会触发 onchange 事件;
只是徘徊在足够的选项触发它。

即：如果用户点击选择，徘徊其中一个选项，然后他点击外面选择，选择的值改变（即使所示的值不），因此事件被触发。

如果select中的某个元素已被选中，则不会发生这种情况。
这个行为或多或少和这个Mozilla的bug相同：
https://bugzilla.mozilla.org/show_bug.cgi?id=265047

解决方案

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

虽然我无法修复这个错误，解决方法是非常简单的工作是添加空的和隐藏的项目列表作为第一个项目，并将其分配为选定的项目。

例如：

 < select id =mySelect> 
< option value =style =display：none;>< / option> 
< option value =1>第一个< / option> 
< option value =2> second< / option> 
< / select> 
  

用户不会看到任何更改，当您清除选择时， 0而不是-1 eg

  var oDDL = document.getElementById（mySelect）; 
 oDDL.selectedIndex = 0; 
  

现场测试案例 - 现在即使在Firefox上也能正常运行。

更新 - 上述代码无法正常运行在IE8中，它仍然显示第一个空的选项。为了解决这个问题，当浏览器不是Firefox的时候，可以简单地在所有支持浏览器的浏览器中删除这个选项。更新的代码将会是：
$ b $ pre $ nav code $ navigator.sayswho =（function（）{
var N = navigator.appName，ua = navigator.userAgent，tem;
var M = ua.match（/（opera | chrome | safari | firefox | msie）\ /？\s *（\。？\d +（\。如果（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中工作。

I have a select, for which a onchange event is set.
The problem is, in Firefox only (FF v. 12), that the onchange event is triggered even if the user does not click on any option; just hovering the option it is enough to trigger it.

i.e.: If the user clicks on the select, hovers one of the options and then he clicks outside the select, the value of the select changes (even if the shown value does not) thus the event is triggered.

This does not happen if one of elements of the select is already selected. The behavior is more or less the same as in this Mozilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=265047

解决方案

This is certainly a bug in Firefox that assign the selected value and selected index upon hovering the items, when there is no selected index defined.

While I can't fix the bug, one workaround that is pretty simple and working is adding empty and hidden item to the list to be the first item and assigning it as the selected item.

For example:

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

The user won't see any change and when you "clear" the selection, assign selected index of 0 instead of -1 e.g.

var oDDL = document.getElementById("mySelect");
oDDL.selectedIndex = 0;

Live test case - behaves properly even on Firefox now.

Update - The above code is not working properly in IE8 as it still showing the first empty option. To solve this, it's possible to simply remove the option in all browsers that support it when the browser is not Firefox. Updated code will be:

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

The function that identifies the browser was taken from this answer.

Updated fiddle - working in Firefox, Chrome, IE9 and IE8.

这篇关于Firefox中的Onchange被触发而不会改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！