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 display属性，因为它没有用！

问题是，当我在主体上尝试有角（click）=“ functionThatHidesTheDiv”并隐藏元素时，当然是因为圆形节点是主体的一部分，所以框永远不会打开？

我也使用角度。一旦元素没有被隐藏，我该如何在svg上的任意位置（除div本身之外）单击以将其隐藏？

Answer 1

您需要检查click事件的“目标”是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>

单击Div外部以将其关闭。 SVG和D3，角度

1 个答案: