Les contrôles dans Firefox reçoivent-ils des événements de souris lorsque leur propriété visible CSS est false?

Question

J'ai un problème avec FIREFOX. J'ai un contrôle de liste invisible sur un contrôle déroulant (html 'select'). Cela ne me dérange pas, mais je dirai que la surcouche est une fenêtre qui apparaît dans le cadre d'un autre contrôle personnalisé.

Même s'il est masqué, il m'empêche de cliquer sur le contrôle déroulant sous-jacent, rendant le contrôle sous-jacent désactivé. Ce n'est pas désactivé cependant, parce que je peux tabuler dessus. Je ne peux pas cliquer dessus. Je sais que c'est l'overlay qui cause le problème, parce que j'ai déplacé le contrôle sous-jacent sur le côté et ça marche à nouveau.

Est-ce un bug dans Firefox? Ce n'est pas comme définir une valeur de translucidité; c'est désactiver complètement le rendu du contrôle, donc je ne pense pas qu'un tel contrôle invisible devrait intercepter les événements de la souris. Ce problème ne se produit pas dans Internet Explorer.

Il existe peut-être une autre propriété CSS que je peux définir en JavaScript pour basculer sa capacité de capture d'événement de souris avec sa visibilité.

dd = document.getElementById('lstStudents'); 
if (dd.style.visibility == 'hidden') dd.style.visibility = 'visible'; else dd.style.visibility = 'hidden'; 

Mise à jour: Je viens de lire une description de la valeur de visibilité CSS « ​​cachée » qui a lu « L'élément est invisible (mais occupe toujours l'espace) ». Donc je suppose que je vais devoir mettre sa hauteur à zéro et régler sa visibilité pour résoudre ce problème.

Answer 1

Modifiez l'index z de votre contrôle de couche supérieure, par exemple, -1. style = "z-index: -1;" Cela le placera sous tout, permettant un accès direct à la liste déroulante. Vous devrez peut-être modifier dynamiquement l'index z pour rétablir le calque sur le dessus lorsqu'il est visible.

More info

Answer 2

Comment cachez-vous l'élément? Si je me souviens bien, la «visibilité: cachée» est censée (à juste titre) fonctionner comme vous le décrivez, alors que «afficher: aucun» bannira complètement le rendu.

Si ce n'est pas la cause, pouvez-vous confirmer à l'aide de Web Developer Toolbar que c'est bien le contrôle invisible qui cause le problème et pas un autre dont l'opacité est définie sur 0 ou autre?

Answer 3

La façon dont j'ai fait les popups avant dans Firefox était avec les propriétés CSS.

z-index: 500; 
display: block; 

pour montrer un élément, et

z-index: -10; 
display: none; 

pour le cacher.

Maintenant. Mes valeurs pour z-index sont extrêmes, mais c'est exactement ce que j'ai choisi. Cela fonctionne pour moi, mais mon application ciblait spécifiquement Firefox; aaaaand j'utilise la propriété d'affichage, que vous avez déclaré vouloir éviter.

Si vous êtes préoccupé par l'utilisation de display: block ou display: hidden, je pense que vous pourriez essayer de jouer avec le positionnement ou de dimensionner l'élément. Rendez l'élément popup absolument positionné et déplacez-le hors-champ lorsqu'il est invisible, ou essayez de faire 0px width et 0px height quand il est invisible.

C'est deux choses que j'explorerais potentiellement si j'avais encore des problèmes. Je ne suis pas sûr si je recommanderais ces comme les meilleures solutions cependant.

Considérez vraiment le nombre d'instances de vos éléments popup auront différentes valeurs d'affichage, j'ai trouvé dans mon cas d'utiliser seulement deux types, «aucun», et «bloquer». Peut-être que la manipulation de la propriété d'affichage sera suffisante pour vous.

Espérons que cela aide.