Om du programmerar i Javascript har du antagligen stött på situationen där du vill ha menyer som öppnas med ett klick och som stängs när användaren klickar utanför menyn. Jag har utvecklat ett ganska enkelt sätt att göra just det. Jag lägger till en händelse lyssnare till dokumentets kropp. När någon klickar på det letar vi efter händelsens mål-ID. Om det stämmer med ID för lådans div, gör ingenting. Om det inte gör det, stäng menyn.
Genom att ta det lite längre är det ineffektivt att lämna en klickhändelsens lyssnare på hela kroppen när den inte används. I det här fallet, om menyn inte har öppnats ännu, finns det ingen anledning att lyssna på ett klick utanför menyn. Lägg till händelse lyssnaren i återuppringningen av div som visas. På samma sätt, när div är dold igen, ta bort händelsen lyssnaren.
Visa Div Klicka inuti den svarta rutan, ingenting händer. Klicka utanför, det försvinner $ ('# showbox'). Klicka (funktion () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('klicka', boxCloser, false);}) ;}); funktionsboxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('klicka', boxCloser, falsk); $ (# Bigbox) dölja (). }}
Se också till att du inkluderar jQuery i ditt projekt eftersom någon av funktionerna ovan använder det biblioteket.
