JavaScript, нажатый вне элемента

Question

Я знаю, что с jQuery довольно легко увидеть, щелкнул ли пользователь за пределами определенного элемента, а затем отреагировал на него, подобно тому, как его закроет щелчок за пределами раскрывающегося раскрывающегося меню.

Я пытаюсь достичь чего-то подобного с помощью JavaScript в одиночку, без jQuery. Вот мой текущий код:

window.onload = function() { 
    var nav = document.querySelectorAll('ul li.current_page_item'); 
    var navList = nav[0].parentNode; 

//Open the navigation menu list 
    nav[0].onclick = function() { 
    navList.className = 'open'; 
    } 
} 

В настоящее время, код будет применяться классом open в неупорядоченный список, если его дочерний элемент li.current_page_item щелкнул.

Я хотел бы вызвать событие (удалить класс open), если пользователь нажимает кнопку за пределами элемента списка li.current_page_item.

Может ли кто-нибудь показать, как я мог слушать, а затем отреагировать на событие, которое сделает что-то вроде этого только с JavaScript?

Спасибо за ваше время.

Answer 1

Добавить щелкнуть по документу, который закроет div, и не забудьте остановитьпрограммирование в обработчике li или он будет распространяться и на документ.

document.onclick = function(e) { 
    navList.className = 'close'; 
} 

nav[0].onclick = function(e) { 
    navList.className = 'open'; 
    e.stopPropagation(); // <---- 
}