Ha Javascript-ben programoz, akkor valószínűleg átfutott abban a helyzetben, amikor olyan menüket szeretne, amelyek kattintással nyílnak meg, és bezáródnak, amikor a felhasználó a menüből kívül kattint. Kidolgoztam egy nagyon egyszerű módszert erre. Hozzáadok egy eseményfigyelőt a dokumentum testéhez. Amikor valaki rákattint, megkeressük az esemény cél azonosítóját. Ha egyezik a doboz div azonosítójával, akkor ne tegyen semmit. Ha nem, zárja be a menüt.
Figyelembe véve egy kicsit tovább, akkor nem hatékony a kattintási esemény-figyelőt az egész testre hagyni, ha azt nem használják. Ebben az esetben, ha a menü még nem volt megnyitva, akkor nincs ok a menüben kívüli kattintás hallgatására. Adja hozzá az eseményhallgatót a megjelenített div-es visszahíváshoz. Ugyanebben az értelemben, amikor a div-t ismét elrejtik, távolítsa el az eseményfigyelőt.
Mutasd a Div Kattintson a fekete mezőben, semmi sem történik. Kattintson kívülre, eltűnik $ ('# showbox'). Kattintson (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('kattintás', boxCloser, hamis); $ ( '# Bigbox'). Elrejteni (); }}
Ügyeljen arra is, hogy a jQuery programot belefoglalja a projektbe, mivel a fenti funkciók egy része a könyvtárat használja.
