Anonim

Ako programirate u Javascriptu, vjerojatno ste naišli na situaciju u kojoj želite da se izbornici otvore na kliku, a oni zatvaraju kada korisnik klikne izvan izbornika. Razvio sam prilično jednostavan način da to učinim upravo to. Tijelu dokumenta dodajem slušatelja događaja. Kad ga netko klikne, tražimo ciljni id događaja. Ako odgovara ID-u divovske kutije, nemojte ništa raditi. Ako to ne uspije, zatvorite izbornik.

Uzimajući to malo dalje, neučinkovito je ostaviti slušatelja klikova na čitavom tijelu kad se ne koristi. U ovom slučaju, ako izbornik još nije otvoren, nema razloga da slušate klik izvan izbornika. Dodajte slušatelja događaja u povratni poziv u prikazivanju diva. U tom istom smislu, kad se div ponovo sakrije, uklonite slušatelja događaja.

Prikaži Div Kliknite unutar crnog okvira, ništa se ne događa. Kliknite vani, nestaje $ ('# showbox'). Click (funkcija () {$ ('# bigbox'). Show (funkcija () {document.body.addEventListener ('klik', boxCloser, false);}) ;}); funkcija boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('klik', boxCloser, false); $ ( '# Bigbox') skrivanje (). }}

Obavezno uključite jQuery u svoj projekt, jer neka od prethodno navedenih funkcija koristi tu knjižnicu.

Zatvori div ili izbornik klikom izvan w / javascripta