Anonim

Якщо ви програмуєте в Javascript, ви, ймовірно, натрапили на ситуацію, коли ви хочете мати меню, що відкриваються при натисканні, і які закриваються, коли користувач клацає поза меню. Я розробив досить простий спосіб зробити саме це. Я додаю слухача події до тіла документа. Коли хтось клацає на ньому, ми шукаємо цільовий ідентифікатор події. Якщо він відповідає ідентифікатору дива поля, тоді нічого не робіть. Якщо цього не відбувається, закрийте меню.

Зважаючи на це трохи далі, малоефективно залишати слухача подій клацання на всьому тілі, коли воно не використовується. У цьому випадку, якщо меню ще не було відкрито, немає причини слухати клацання поза меню. Додайте слухача події до зворотного дзвінка дзвінка, що відображається. У тому ж ключі, коли діва буде приховано знову, видаліть слухача події.

Показати Div Клацніть всередині чорного поля, нічого не відбувається. Клацніть назовні, він зникає $ ('# showbox'). Click (функція () {$ ('# bigbox'). Show (функція () {document.body.addEventListener ('click', boxCloser, false);}) ;}); функція boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ('# bigbox'). hid (); }}

Також переконайтеся, що ви включили jQuery у свій проект, оскільки частина функцій, описаних вище, використовує цю бібліотеку.

Закрийте div або меню, клацнувши за межами w / javascript