Javascript 如何在uisng JS外部单击时隐藏上下文菜单？

我有一个上下文菜单，单击此网络图中的任何节点都会打开它。 我正在尝试使用Javascript关闭单击外部任意位置的上下文菜单

我试图使用document.onclick隐藏它，但它不起作用

有关代码片段，请参考JSFIDLE链接

单击“外部”时应关闭关联菜单

---

向文档添加一个单击侦听器，并尝试检查它是在容器元素内部还是外部单击的。如果在内部单击，最近的方法将返回父容器，它将为您提供容器元素，否则如果在外部单击，它将提供null。我们对null感兴趣，然后我们将隐藏上下文菜单div

document.addEventListener('click', function(e){
  let inside = (e.target.closest('#container'));
  if(!inside){
    let contextMenu = document.getElementById('contextMenuId');
    contextMenu.setAttribute('style', 'display:none');
  }
});

如果需要设置除此之外的边界，只需将容器替换为任何合适的边界即可

如果您没有使用jQuery，那么很少有浏览器不支持最近的函数。请确保您使用pollyfill作为最近的函数

更新小提琴

注意：您的容器元素几乎占据了整个页面，很难在容器外部单击。检查您是否确实在单击容器元素外部

document.addEventListener('click', function(e){
  let inside = (e.target.closest('#container'));
  if(!inside){
    let contextMenu = document.getElementById('contextMenuId');
    contextMenu.setAttribute('style', 'display:none');
  }
});