Javascript 单击Div外部以关闭它。SVG&；D3，角度

我想单击div之外的任何位置来隐藏它

我有一个svg背景，上面有一个带有节点的图形

我点击SVG上的一个节点（圆圈），如果点击了这个特定的“额外”节点，我会出现一个框，我会用以下内容显示该框：

  d3.select('#rightBox')
  .attr('hidden', null);
d3.select('#leftBox')
  .attr('hidden', null);
d3.select('#headerDiv')
  .attr('hidden', null)
d3.select('#headerText')
  .attr('hidden', null)

这是因为div在加载时是隐藏的。我没有使用css显示属性，因为它不工作

问题是当我尝试在主体上使用angular（单击）=“FunctionthatHiddesthedIV”并隐藏元素时，当然，因为圆节点是主体的一部分，所以框永远不会打开

---

我也用角的。元素未隐藏后，如何单击svg上除div本身之外的任何位置来隐藏它？

您需要检查单击事件的“目标”是div还是在div内部

也许是那样的

const svg=document.querySelector（'.svg'）；
const circle=document.querySelector（'.circle'）；
svg.addEventListener（'click'，（e）=>{
如果（！（e.target==circle）和&！circle.contains（e.target））{
log（“单击外部”）；
}否则{
log（“单击内部”）；
}
});
.svg{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：400px；
高度：400px；
背景色：番茄；
}
.圆圈{
宽度：50px；
高度：50px；
边界半径：50%；
背景颜色：棕褐色；
}

我不认为document.queryselector可以与我的angular应用程序一起使用，但这看起来很接近……这可以与D3一起使用吗？是的，document.queryselector是用于vanilla.js的，如果你想与angular做同样的事情，你可能需要使用@ViewChild来获取对你不想排除的元素的引用