2010-11-17 8 views
1

J'ai implémenté un menu déroulant personnalisé avec HTML, CSS et JavaScript. Cela fonctionne bien maintenant, mais je ne suis pas content de la façon dont je fais le "flou" en ce moment. Lorsque vous ouvrez la liste, puis cliquez ailleurs, il devrait s'effondrer. Ce que j'ai fait, c'est que j'ai ajouté un écouteur d'événement (mousedown) au window après avoir développé la liste et supprimé l'écouteur après l'effondrement. L'événement vérifie essentiellement si l'événement DOM s'est produit sur l'élément de droite en utilisant target et si ce n'est pas le cas, flouter le contrôle déroulant. Je connais focus et blur. Cependant, ils semblent seulement fonctionner sur des éléments de forme, ce que je trouve tout à fait compréhensible. Ils prennent également en charge d'autres scénarios comme lorsque "tabbing" loin.Focus et brouiller les événements pour HTMLDivElement?

De toute façon, je vous demande s'il y a une meilleure façon de faire ce que je fais en ce moment. Ce que je fais me sent juste stupide.

Répondre

1

Peut-être que vous pourriez avoir une entrée fictive et faire la mise au point lorsque le contrôle est actif. Puis regardez le flou et fermez la liste. Il ne pourrait pas être display:none mais peut-être opacity:0, ou juste hors-vue.

+0

Le seul problème est que si vous cliquez sur la liste déroulante réelle, il va flouter l'entrée et penser qu'il devrait réduire le menu déroulant. Ou voulez-vous dire que je configure un écouteur de clic à cette liste déroulante qui empêcheDefault()? – Tower

+0

Yah c'est vrai. Vous aurez probablement besoin de voir si la cible du flou est le contrôle lui-même, et ne pas arrêter l'événement. –

0

Ce que je fais est d'utiliser mouseout pour fermer mes listes personnalisées. Je crée une boîte englobante autour de ma liste déroulante. Cette boîte contient l'événement onmouseout qui ferme la liste déroulante lorsque la souris se déplace en dehors de celle-ci. De cette façon, vous pouvez avoir un peu de remplissage en dehors de votre liste qui donnerait à vos utilisateurs une fonctionnalité un peu meilleure, alors il suffit de passer votre souris sur votre liste de base.

Si vous voulez le faire en utilisant des événements de clic, j'aurais une fonction globale, comme il semble que vous avez configuré, et appelez cette fonction sur tous les événements de clic sur la page.

Questions connexes