Wenn Sie sich jemals mit Menüs beschäftigt haben, die beim Klicken geöffnet werden, aber geschlossen werden sollen, wenn ein Benutzer außerhalb des Menübereichs klickt, können Sie dies ganz einfach tun. Ich füge dem Dokumentkörper einen Ereignis-Listener hinzu. Wenn jemand darauf klickt, suchen wir nach der Ziel-ID des Ereignisses. Wenn es mit der ID des div der Box übereinstimmt, dann tue nichts. Wenn dies nicht der Fall ist, schließen Sie das Menü.
Wenn Sie das ein wenig weiterführen, ist es ineffizient, einen Klickereignis-Listener auf dem gesamten Körper zu belassen, wenn er nicht verwendet wird. In diesem Fall, wenn das Menü noch nicht geöffnet wurde, gibt es keinen Grund, auf einen Klick außerhalb des Menüs zu warten. Fügen Sie den Ereignis-Listener im Callback des angezeigten div hinzu. Wenn das div erneut ausgeblendet wird, entfernen Sie den Ereignis-Listener.
Show Div Klicken Sie in die Black Box, nichts passiert. Klicke außen, es verschwindet $ ('# showbox'). Click (function () {$ ('# bigbox'). Show (funktion () {document.body.addEventListener ('click', boxCloser, false);}) ;}); Funktion boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ('# bigbox'). hide (); }} Siehe Arbeitsbeispiel
Stellen Sie außerdem sicher, dass Sie jQuery enthalten, da einige der oben genannten Funktionen die Bibliothek verwenden.
