Hvis du noen gang har jobbet med menyer som åpnes på klikk, men vil at de skal lukkes når en bruker klikker utenfor menyområdet, er det en ganske enkel måte å gjøre det på. Jeg legger til en hendelselytter i dokumentets kropp. Når noen klikker på det, ser vi etter arrangementets mål-ID. Hvis det samsvarer med IDen til boksens div, gjør du ingenting. Hvis ikke, lukk menyen.
Tar det litt lenger, er det ineffektivt å forlate en klikkhendelselytter på hele kroppen når den ikke blir brukt. I dette tilfellet, hvis menyen ikke har blitt åpnet ennå, er det ingen grunn til å lytte etter et klikk utenfor menyen. Legg til hendelseslytteren i tilbakekallingen av diven som vises. I samme vene, når div blir gjemt igjen, fjern hendelseslytteren.
Vis Div Klikk i den svarte boksen, ingenting skjer. Klikk utenfor, det forsvinner $ ('# showbox'). Klikk (funksjon () {$ ('# bigbox'). Vis (funksjon () {document.body.addEventListener ('klikk' ;}); funksjonsboksCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ( '# Bigbox') skjule (.); }} Se arbeidseksempel
Pass også på at du inkluderer jQuery, siden noen av funksjonene ovenfor bruker biblioteket.
