Tıklamayla açılan menülerle uğraştınız, ancak bir kullanıcı menü alanının dışını tıkladıklarında kapanmalarını istiyorsanız, bunu yapmanın oldukça basit bir yolu. Belgenin gövdesine bir olay dinleyicisi ekliyorum. Birisi tıkladığında, etkinliğin hedef kimliğini ararız. Kutunun div numarası ile eşleşirse, o zaman hiçbir şey yapmayın. Yoksa, menüyü kapatın.
Bunu biraz daha ileri götürdüğünüzde, kullanılmadığı zaman tüm vücut üzerinde bir tıklama olayı dinleyicisini bırakmak verimsizdir. Bu durumda, menü henüz açılmamışsa, menü dışında bir tıklama dinlemek için bir neden yoktur. Gösterilen dinleyicinin geri çağrısına olay dinleyicisini ekleyin. Aynı şekilde, div tekrar gizlendiğinde, olay dinleyicisini kaldırın.
Div Göster Kara kutunun içine tıklayın, hiçbir şey olmuyor. Dışarıya tıklayınca, $ ('# showbox') 'ı yok eder.Tamam (function () {$ (' # bigbox '). Show (işlev () {document.body.addEventListener (' click ', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ( '# Bigbox') gizlemek ().; }}
Çalışma örneğini görün
Ayrıca, yukarıdaki işlevsellikten bazılarının kütüphaneyi kullandığı için jQuery'yi dahil ettiğinizden emin olun.