Als u in Javascript programmeert, bent u waarschijnlijk de situatie tegengekomen waarin u menu's wilt openen die met een klik worden geopend en die sluiten wanneer de gebruiker buiten het menu klikt. Ik heb een vrij eenvoudige manier ontwikkeld om dat te doen. Ik voeg een gebeurtenisluisteraar toe aan het hoofdgedeelte van het document. Wanneer iemand erop klikt, zoeken we naar het doel-ID van het evenement. Als het overeenkomt met de ID van de div van de box, doe dan niets. Als dit niet het geval is, sluit u het menu.
Om dat nog een beetje verder te doen, is het inefficiënt om een click event-luisteraar op het hele lichaam te laten wanneer deze niet wordt gebruikt. Als het menu in dit geval nog niet is geopend, is er geen reden om naar een klik buiten het menu te luisteren. Voeg de gebeurtenislistener toe aan de callback van de div die wordt weergegeven. In dezelfde geest, wanneer de div weer wordt verborgen, verwijdert u de gebeurtenislistener.
Div weergeven Klik in het zwarte vak, er gebeurt niets. Klik buiten, het verdwijnt $ ('# showbox'). Klik (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;}); functie boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ( '# BigBox') te verbergen ().; }}
Zorg er ook voor dat u jQuery in uw project opneemt, omdat sommige van de bovenstaande functies die bibliotheek gebruiken.
