Anonim

Si programeu Javascript, probablement haureu trobat la situació en què voleu tenir els menús oberts amb un clic i que es tanquen quan l’usuari fa clic fora del menú. He desenvolupat una manera bastant simple de fer-ho. Afegeixo un oïdor d'esdeveniments al cos del document. Quan algú el fa clic, busquem l’identificador d’orientació de l’esdeveniment. Si coincideix amb l'ID de la divisió de la casella, no feu res. Si no és així, tanca el menú.

Un cop més lluny, és ineficient deixar un oïdor d'esdeveniments de clic a tot el cos quan no s'està utilitzant. En aquest cas, si el menú encara no s'ha obert, no hi ha raó per escoltar un clic fora del menú. Afegiu l’oient d’esdeveniments a la devolució de trucades de la divisió que es mostra. En aquesta mateixa línia, quan es torni a ocultar la divisió, suprimiu l’oient de l’esdeveniment.

Mostra Div Feu clic a la caixa negra, no passa res. Feu clic a fora, desapareix $ ('# showbox'). Feu clic a (funció () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('feu clic', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('clic', boxCloser, fals); $ ("# bigbox"). hide (); }}

També assegureu-vos d'incloure jQuery al vostre projecte ja que algunes de les funcionalitats anteriors utilitzen aquesta biblioteca.

Tanqueu la divisió o el menú que feu clic a l'exterior w / javascript