Om du någonsin har tagit hand om menyer som öppnas på klick, men vill att de ska stängas när en användare klickar utanför menyområdet, är det här ett ganska enkelt sätt att göra det. Jag lägger till en händelse lyssnare i dokumentets kropp. När någon klickar på det letar vi efter händelsens mål-id. Om det matchar ID för boxens div, gör ingenting. Om det inte gör stänger du menyn.
Med det lite längre är det ineffektivt att lämna en klickhändelselysare på hela kroppen när den inte används. I det här fallet, om menyn inte har öppnats än, finns det ingen anledning att lyssna på ett klick utanför menyn. Lägg till händelselyssnaren i återuppringningen av div som visas. På samma sätt, när diven döljs igen, ta bort händelselyssnaren.
Visa Div Klicka in i den svarta rutan, ingenting händer. Klicka utåt, det försvinner $ ('# showbox'). Klicka (funktion () {$ ('# bigbox'). Visa (funktion () {document.body.addEventListener ('klick', boxCloser, false);} ;}); funktion boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ (# Bigbox) dölja (). }} Se arbetsexempel
Se även till att du inkluderar jQuery eftersom vissa av funktionerna ovan använder biblioteket.
