javascript - 单击 Div 外部以将其关闭。 SVG 和 D3， Angular

Question

我想点击我的 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 (click) = "functionThatHidesTheDiv"并隐藏元素时，当然是因为圆形节点是主体的一部分，所以盒子永远不会打开？

我也用angular。一旦元素未隐藏，我如何单击 svg 上除 div 本身以外的任何地方来隐藏它？

Answer 1

您需要检查点击事件的“目标”是 div 还是在其中。

也许是这样的？

const svg = document.querySelector('.svg');
const circle = document.querySelector('.circle');

svg.addEventListener('click', (e) => {
 if (!(e.target === circle) && !circle.contains(e.target)) {
   console.log('Click outside');
 } else {
  console.log('Click inside');
 }
});

.svg {
  display: flex;
  justify-content:center;
  align-items: center;
  width: 400px;
  height: 400px;
  background-color: tomato;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: tan;
}

<section>
  <div class="svg">
    <div class="circle"></div>
  </div>
</section>