Нажмите за пределами Div, чтобы закрыть его.SVG & D3, угловой

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" на теле и скрываю элементы, конечно, потому что узлы круга являются частьютела тогда коробка не открывается?

Я тоже использую угловой.как только элемент не скрыт, как я могу щелкнуть где-нибудь на 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>