Jak sprawdzić czy element znajduję się wewnątrz drugiego?

Question

Jak sprawdzić czy element na który kliknąłem znajduje się w danym elemencie. Albo na odwrót czy kliknięty element ma danego rodzica. Prosiłbym w czystym JS bez JQuery

Próbowałem tak ale nie działa: 

onClick(event) {
    let parent = this._eref;
    let target = event.target;

    if (parent.contains(target)){
    //do something
    }
  }

Wydaje mi się że contains sprawdza tylko czy parent posiada ten element ale nie patrzy na to czy jego dzieci go posiadają. Czy mam racje?

Comments

Skorzystaj z parent.querySelector( `#${ target.id }` );

wtedy wyszukasz w parencie (nawet wśród zagnieżdżonych elementów), czy występuje element o danym ID - w tym przypadku event.target. Tylko element, którego szukasz musi mieć nadany atrybut id

---

Niby działa ale target jest różny ponieważ to mi jest potrzebne do wykrycia czy kliknąłem po za jakimś elementem żeby go zamknąć.

---

Nie bardzo rozumiem.

Klikasz gdzieś na stronie - jeśli EventListener nasłuchuje na "ścieżce" eventu, czyli albo na danym elemencie albo jego przodkach (rodzic, dziadek itd. aż do roota), to będziesz mieć dostęp do wywołanego eventa. Jeśli natomiast masz EventListener ustawiony na jakiś element, którego potomkiem nie jest ten w który klikniesz to nie otrzymasz jego eventu.

Chcesz nasłuchać zdarzenia, które nie będzie wywołane przez element o danym id ale przez jakiś poboczny element? Jeśli to jest rodzeństwo, to masz odpowiednie metody:

https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling

https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling

CSS również służy pomocą: https://css-tricks.com/child-and-sibling-selectors/

Answer 1

Pierwsze co przyszło mi do głowy z czystego JS to można przeanalizować 

innerHTML

danego elementu poprzez wyszukanie jakiegoś słowa kluczowego np id="nazwaelementu". Pewnie nie jest to optymalne rozwiązanie, ale bez jQ to nic innego mi teraz nie przychodzi do głowy. A dlaczego nie chcesz użyć jQ ?

Comments

Pisze projekt w Angular 2 i dla jednego przypadku nie chce wrzucać JQ. W sumie one chyba mogą razem współdziałać ale zastanowię się na tym jeszcze :)