Cliquez sur Détecteur extérieur

C'est une chose UX raisonnable que vous pouvez cliquer sur quelque chose, et non seulement être en mesure de cliquer sur la même chose pour le fermer, mais cliquez en dehors de la chose qu'il a ouvert pour le fermer. Kitty Giraudel vient de bloguer à ce sujet. L'astuce est qu'une fois la chose ouverte, vous attachez un gestionnaire d'événements à la fenêtre avec ces montres pour les événements (comme un autre clic). Si ce clic ultérieur ne s'est pas produit dans la zone nouvellement ouverte, fermez-le. Comme, littéralement Thing.Contains (event.target). C'est une belle astuce, je pense.

Il y a cependant beaucoup de petites choses à penser. Par exemple:

Nous devons arrêter la propagation de l'événement de clic sur la bascule elle-même. Sinon, il monte à l'écouteur de la fenêtre, et comme la bascule n'est pas contenue dans le menu, elle fermerait ce dernier dès que nous essaierons de l'ouvrir.

À droite. Je ne peux pas avoir ça ou ça casse le tout.

Nous avons ce même modèle dans de nombreux endroits sur Codepen. Comme Kitty, nous l'avons implémenté dans React. En jetant un coup d'œil à notre mise en œuvre, il a un certain nombre de cloches et de chiens que je pensais que je valait la peine d'être mentionnés. Par exemple, la nôtre n'est pas une fonction ou un crochet, mais un wrapper composant que nous utilisons comme:

 <clickoutsidedetector onclickoutside="{()"> {closeThething (); }}
>
  Un menu ou modal ou quelque chose.
</clickoutsidedetector>

De cette façon, c'est un emballage générique que nous pouvons utiliser pour tout ce qui est sur un «clic à l'extérieur». Les cloches et les whistles sont:

• Vous pouvez passer dans un accessoire de composant afin qu'il n'ait pas à se manifester en tant que
  mais quoi que vous vouliez, il soit sémantiquement.
• L'hélice d'écoute vous permet de basculer s'il écoute actuellement activement des événements. Comme un moyen rapide de le court-circuiter.
• Une pression ESC est l'équivalent fonctionnel de cliquer à l'extérieur.
• Gère les événements tactiles ainsi que les clics
• Gère un cas où le clic à l'extérieur se produit dans un , auquel cas la fenêtre a un événement flou plutôt qu'un clic.
• Vous permet de passer des éléments à ignorer, donc plutôt que de l'astuce de stoppropagation que Kitty a documenté, nous pouvons être spécifiques sur les éléments qui ne déclenchent pas un clic à l'extérieur.

Tant de petites choses! Pour moi, c'est le petit exemple parfait de développement du monde réel. Vous voulez juste un petit comportement et, en fin de compte, il y a une tonne de considérations et de cas de bord à laquelle vous devez faire face et ce n'est jamais vraiment fait. Je viens de toucher notre composant au cours des derniers mois en raison d'un outil tiers que nous avons utilisé a changé la façon dont ils ont fait quelque chose qui a affecté les iframes utilisés sur la page. En fin de compte, j'ai dû surveiller un événement flou qui consulte ensuite la liste de classe de Document.ActiveElement pour voir si c'était la chose qui mange le clic à l'extérieur!

Annnnyway, j'ai lancé une version unique de la nôtre ici.

Et j'ai vu quelque chose du post de Kitty que nous ne gérions pas, et c'est dans la toute première phrase:

Nous avions besoin d'un moyen de fermer le menu lorsque vous cliquez en dehors de lui ou de l'entraîner.

Met l'accent sur le mien. Ne vous inquiétez pas, j'ai un TODO dans notre code pour cela maintenant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!