Anonim

Ak programujete v jazyku Javascript, pravdepodobne ste narazili na situáciu, keď chcete mať ponuky, ktoré sa otvárajú po kliknutí a ktoré sa zatvoria, keď používateľ klikne mimo ponuky. Vyvinul som veľmi jednoduchý spôsob, ako to urobiť. Do tela dokumentu pridávam poslucháča udalostí. Keď naň niekto klikne, hľadáme cieľové ID udalosti. Ak sa zhoduje s ID div boxu, nerobte nič. Ak nie, zatvorte menu.

Ak to vezmeme ďalej, je neefektívne nechať poslucháča udalosti kliknutia na celom tele, keď sa nepoužíva. V tomto prípade, ak ešte nebolo otvorené menu, nie je dôvod počúvať kliknutie mimo ponuky. Pridajte poslucháča udalosti do spätného volania zobrazovanej div. V tom istom duchu, keď sa div znovu skrýva, odstráňte poslucháča udalostí.

Show Div Kliknite do čiernej skrinky, nič sa nestane. Kliknutie von, zmizne $ ('# showbox'). Click (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ( '# BigBox') skryť (). }}

Nezabudnite tiež do svojho projektu zahrnúť jQuery, pretože niektoré z vyššie uvedených funkcií túto knižnicu využívajú.

Zatvorte div alebo menu po kliknutí mimo w / javascriptu