Als u ooit hebt gewerkt met menu's die openen met klikken, maar wilt dat ze worden gesloten wanneer een gebruiker buiten het menu klikt, is hier een vrij eenvoudige manier om het te doen. Ik voeg een gebeurtenislistener toe aan de body van het document. Wanneer iemand erop klikt, zoeken we naar de doel-ID van het evenement. Als het overeenkomt met de ID van de box's div, doe dan niets. Als dit niet het geval is, sluit u het menu.
Als je dat een beetje verder nastreeft, is het inefficiënt om een klikgebeurtenislistener op het hele lichaam achter te laten als het niet wordt gebruikt. In dit geval, als het menu 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 weergegeven div. In dezelfde geest, verwijder de gebeurtenislistener wanneer de div weer verborgen is.
Show Div Klik in de zwarte doos, er gebeurt niets. Klik buiten, het verdwijnt $ ('# showbox'). Klik (functie () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ( '# BigBox') te verbergen ().; }} Zie werkvoorbeeld
Zorg er ook voor dat u jQuery opneemt, omdat een deel van de bovenstaande functionaliteit de bibliotheek gebruikt.
