Se programmi in Javascript, probabilmente hai riscontrato la situazione in cui desideri avere menu che si aprono con un clic e che si chiudono quando l'utente fa clic al di fuori del menu. Ho sviluppato un modo abbastanza semplice per farlo. Aggiungo un listener di eventi al corpo del documento. Quando qualcuno fa clic su di esso, cerchiamo l'ID target dell'evento. Se corrisponde all'ID del div della casella, non fare nulla. In caso contrario, chiudere il menu.
Prendendolo un po 'oltre, è inefficiente lasciare un listener di eventi click su tutto il corpo quando non viene utilizzato. In questo caso, se il menu non è stato ancora aperto, non c'è motivo di ascoltare un clic al di fuori del menu. Aggiungi il listener di eventi nel callback del div visualizzato. Allo stesso modo, quando il div viene nuovamente nascosto, rimuovere il listener di eventi.
Mostra Div Fare clic all'interno della casella nera, non succede nulla. Fare clic all'esterno, scompare $ ('# 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') nascondere ().; }}
Assicurati anche di includere jQuery nel tuo progetto poiché alcune delle funzionalità sopra menzionate usano quella libreria.
