时间戳

首页 > 解决方案 > 单击 Div 外部将其关闭。SVG 和 D3，角度

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 display 属性，因为它不起作用！

问题是当我在身体上尝试 angular (click) = "functionThatHidesTheDiv" 并隐藏元素时，当然因为圆形节点是身体的一部分，那么盒子永远不会被打开？

我也使用角度。一旦元素没有隐藏，我如何单击 svg 上的任何位置，不包括 div 本身来隐藏它？

标签： javascriptangulard3.jssvg

解决方案

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

推荐阅读