Hvis du programmerer i Javascript, har du sandsynligvis kørt over den situation, hvor du vil have menuer, der åbnes med et klik, og som lukkes, når brugeren klikker uden for menuen. Jeg har udviklet en temmelig enkel måde at gøre netop det på. Jeg tilføjer en begivenhedslytter til dokumentets krop. Når nogen klikker på det, ser vi efter begivenhedens mål-id. Hvis det matcher ID'et på boksens div, skal du ikke gøre noget. Hvis det ikke gør det, skal du lukke menuen.
Når man tager det lidt videre, er det ineffektivt at efterlade en klikbegivenhedslytter på hele kroppen, når den ikke bruges. 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 begivenhedslytteren i tilbagekaldet til den div, der vises. I den samme ånd, når div'en skjules igen, skal du fjerne begivenhedslytteren.
Vis div Klik inde i den sorte boks, der sker ikke noget. Klik udenfor, den forsvinder $ ('# showbox'). Klik (funktion () {$ ('# bigbox'). Vis (funktion () {document.body.addEventListener ('klik', boxCloser, falske);}) ;}); funktionsboksCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('klik', boxCloser, falske); $ ( '# BigBOX') skjule ().; }}
Sørg også for, at du inkluderer jQuery i dit projekt, da nogle af funktionerne ovenfor bruger det bibliotek.
