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(); // <----
}

JavaScript点击元素外部

1 个答案: