javascript - 在元素外部单击的 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(); // <----
}