Hvis du nogensinde har handlet med menuer, der åbner på klik, men vil have dem lukket, når en bruger klikker uden for menuområdet, er det en ret simpel måde at gøre det på. Jeg tilføjer en begivenhedslytter til dokumentets krop. Når nogen klikker på det, ser vi efter arrangementets mål-id. Hvis det matcher ID'en af boksens div, skal du ikke gøre noget. Hvis det ikke gør det, skal du lukke menuen.
Tager det lidt længere, er det ineffektivt at efterlade en klikhændelseslytter på hele kroppen, når den ikke bliver brugt. I dette tilfælde, hvis menuen ikke er åbnet endnu, er der ingen grund til at lytte til et klik uden for menuen. Tilføj eventlytteren i tilbagekaldelsen af div'en, der vises. I samme vene, når div'en bliver skjult igen, fjern eventlytteren.
Vis Div Klik i den sorte boks, intet sker. Klik udenfor, det forsvinder $ ('# showbox'). Klik (funktion () {$ ('# bigbox'). Show (funktion () {document.body.addEventListener ('klik', boxCloser, false);}) ;}); funktion boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('klik', boxCloser, false); $ ( '# BigBOX') skjule ().; }} Se arbejdseksempel
Sørg også for at inkludere jQuery, da nogle af funktionerne ovenfor bruger biblioteket.
