Onchange sur Firefox est déclenché sans changer

J'ai un choix, pour lequel un événement onchange est défini.
Le problème est que, dans Firefox uniquement (FF v. 12), l'événement onchange est déclenché même si l'utilisateur ne clique sur aucune option; En bas de l'option, il suffit de le déclencher.

C'est-à-dire: si l'utilisateur clique sur le sélectionner, survient l'une des options, puis il clique en dehors de la sélection, la valeur des modifications de sélection (même si la valeur affichée ne l'est pas), donc l'événement est déclenché.

Cela n'arrive pas si l'un des éléments de sélection est déjà sélectionné. Le comportement est plus ou moins le même que dans ce bug Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=265047

Il s'agit certainement d'un bug dans Firefox qui attribue la valeur sélectionnée et l'index sélectionné lors du survol des éléments, lorsqu'il n'y a pas d'index sélectionné.

Bien que je ne puisse pas réparer le bug, une solution de contournement qui est assez simple et utile est d'ajouter un élément vide et caché à la liste pour être le premier élément et l'affecter comme élément sélectionné.

Par exemple:

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

L'utilisateur ne verra aucun changement et, lorsque vous "effacez" la sélection, affectez l'index sélectionné de 0 au lieu de -1 par exemple

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

Live case test – se comporte correctement même sur Firefox maintenant.

Mise à jour – Le code ci-dessus ne fonctionne pas correctement dans IE8 car il affiche toujours la première option vide. Pour résoudre ce problème, il est possible de supprimer simplement l'option dans tous les navigateurs qui le supportent lorsque le navigateur n'est pas Firefox. Le code mis à jour sera:

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

La fonction qui identifie le navigateur a été prise à partir de cette réponse .

Violon mis à jour – fonctionnant dans Firefox, Chrome, IE9 et IE8.