Klicken Sie auf den Außendetektor

Es ist eine vernünftige UX-Sache, die Sie auf etwas eröffnen können und dann nicht nur in der Lage sind, auf das gleiche zu klicken, um es zu schließen, sondern auch auf das Ding klicken, das es geöffnet hat, um es zu schließen. Kitty Giraudel hat gerade darüber gebloggt. Der Trick ist, dass Sie, sobald das Ding geöffnet ist, mit diesen Uhren einen Ereignishandler mit diesen Uhren für Ereignisse anschließen (wie ein weiterer Klick). Wenn dieser nachfolgende Klick in dem neu eröffneten Bereich nicht auftrat, schließen Sie ihn. Wie buchstäblich ding.contains (Event.Target). Ich denke, es ist ein schöner Trick.

Es gibt jedoch viele kleine Dinge zu denken. Zum Beispiel:

Wir müssen die Propagation des Klickereignisses auf dem Umschalten selbst stoppen. Andernfalls geht es zum Fensterklick -Listener und da der Umschalter nicht im Menü enthalten ist, schließt er letztere, sobald wir versuchen, ihn zu öffnen.

Rechts rechts. Ich kann das nicht haben oder es bricht das Ganze.

Wir haben das gleiche Muster an vielen Stellen auf Codepen. Wie Kitty haben wir es in React implementiert. Bei unserer Implementierung einen Blick darauf werfen, hat es eine Reihe von Schnickschnack und Heißhäuten, die ich für erwähnenswert hielt. Zum Beispiel ist unsere keine Funktion oder einen Haken, sondern eine Komponentenverpackung, die wir verwenden, wie:

 <clickoutsidedtectors h onclickoutside="{()"> {closeThing (); }}
&gt;
  Ein Menü oder ein Modal oder so.
</clickoutsidedtectors>

Auf diese Weise handelt es sich um eine generische Wrapper, die wir für alles auf einem „draußen klicken“ verwenden können. Die Glocken-und-Whistles sind:

• Sie können Komponenten -Requisite übergeben, damit es sich nicht als
  manifestieren muss, aber was auch immer Sie wollen, dass es semantisch ist.
• Mit der Hörenpropie können Sie umschalten, wenn sie derzeit aktiv Ereignisse anhört. Wie ein kurzer Weg, um es kurz zu machen.
• Ein ESC -Schlüsselpress ist das funktionale Äquivalent zum Klicken nach draußen.
• Griffe Touch -Ereignisse sowie Klicks
• Verarbeitet einen Fall, in dem der Klick nach draußen in einen
• Ermöglicht es Ihnen, Elemente zu ignorieren, um zu ignorieren. Anstatt den StopPropagation -Trick, den Kitty dokumentiert hat, können wir uns mit Elementen, die keinen Klick außen auslösen, spezifisch sein.

So viele kleine Dinge! Für mich ist dies das perfekte kleine Beispiel für die Entwicklung der realen Welt. Sie wollen nur ein kleines Verhalten und letztendlich gibt es eine Menge Überlegungen und Randfälle, mit denen Sie sich befassen müssen, und es ist nie wirklich getan. Ich habe gerade unsere Komponente in den letzten Monaten berührt, weil ein Tool von Drittanbietern verwendet wurde, das wir verwendet haben, wie sie etwas getan haben, das auf der Seite iFrames betroffen war. Letztendlich musste ich nach einem Unschärfenereignis achten, das dann die Klasse von Dokument überprüft. ActiveLement, um zu sehen, ob dies das Ding war, das den Klick draußen gegessen hat!

Annnnyway, ich habe hier eine nur heftig abgestimmte Version von uns geworfen.

Und ich habe etwas aus Kittys Post gesehen, das wir nicht behandelten, und es ist im allerersten Satz:

Wir brauchten einen Weg, um das Menü zu schließen, wenn wir draußen klicken oder daraus eintobeln.

Hervorhebung meiner. Mach dir keine Sorgen, ich habe jetzt ein Todo in unserem Code.

Das obige ist der detaillierte Inhalt vonKlicken Sie auf den Außendetektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!