• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
672 wizyt
pytanie zadane 19 lutego 2017 w JavaScript przez maly93 Użytkownik (640 p.)

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?

komentarz 19 lutego 2017 przez ScriptyChris Mędrzec (190,190 p.)

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

komentarz 20 lutego 2017 przez maly93 Użytkownik (640 p.)
edycja 20 lutego 2017 przez maly93
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ąć.
komentarz 20 lutego 2017 przez ScriptyChris Mędrzec (190,190 p.)

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/

1 odpowiedź

–1 głos
odpowiedź 19 lutego 2017 przez Artek Stary wyjadacz (11,800 p.)

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 ?

komentarz 19 lutego 2017 przez maly93 Użytkownik (640 p.)
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 :)

Podobne pytania

0 głosów
1 odpowiedź 110 wizyt
pytanie zadane 14 grudnia 2019 w JavaScript przez VGB Początkujący (370 p.)
0 głosów
1 odpowiedź 108 wizyt
pytanie zadane 18 października 2018 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)
0 głosów
2 odpowiedzi 411 wizyt
pytanie zadane 3 marca 2020 w JavaScript przez xshaoox Początkujący (280 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...