Jos ohjelmoit Javascriptillä, olet todennäköisesti törmännyt tilanteeseen, jossa haluat, että valikot avautuvat napsautuksella ja sulkeutuvat, kun käyttäjä napsauttaa valikon ulkopuolella. Olen kehittänyt melko yksinkertaisen tavan tehdä juuri tämä. Lisään tapahtuman kuuntelijan asiakirjan runkoon. Kun joku napsauttaa sitä, etsimme tapahtuman kohdetunnusta. Jos se vastaa laatikon div-tunnusta, älä tee mitään. Jos ei, sulje valikko.
Kun otetaan hieman eteenpäin, on tehotonta jättää napsautustapahtuman kuuntelija koko vartaloon, kun sitä ei käytetä. Jos valikkoa ei ole vielä avattu, tässä tapauksessa ei ole syytä kuunnella napsautusta valikon ulkopuolella. Lisää tapahtuman kuuntelija näytetyn div-yksikön takaisinsoittoon. Samanaikaisesti, kun div on piilotettu uudelleen, poista tapahtuman kuuntelija.
Näytä Div napsauta mustan ruudun sisällä, mitään ei tapahdu. Napsauta ulkopuolella, se katoaa $ ('# showbox'). Napsauta (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('napsauta', boxCloser, false); $ ( '# Bigbox'). Piilottaa (); }}
Muista myös sisällyttää jQuery projektiisi, koska jotkut yllä olevista toiminnoista käyttävät kyseistä kirjastoa.
