JS OOP - eventhandler - jak to zrobić poprawnie

pytanie zadane 23 kwietnia 2017 w JavaScript przez hoktaur Pasjonat (22,250 p.)

Gdy mam:

<div class="container">
  <div class=" target">
  </div>
</div>

w JS w methodzie dodaje addEventListener np.:

document.querySelector('.container').addEventListener('click', this);

i do tej pory wsio działa poprawnie i jest OK. gdy robię if'a lub case dla jednego div'a bez dzieci np.:

if(event.target.classList.contains('target')) to zrób coś tam;

to działa ok.

Problem jest jak poprawnie teraz odczytać kliknięcie tego nadrzędnego div'a (.target) gdy jest przykryty dwoma childami (targetSubDiv1 i targetSubDiv2), np.:

<div class="container">
  <div class=" target">
    <div class="targetSubDiv1">
    </div>
    <div class="targetSubDiv2">
    </div>
  </div>
</div>

mogę co prawda zrobić coś takiego:

if(event.target.parentNode.classList.contains('target') ||
event.target.classList.contains('target'))

albo ustawić na tym divem szkło o wielkości div nadrzędnego np.:

<div class="container">
  <div class="">
    <div class="targetSubDiv1">
    </div>
    <div class="targetSubDiv2">
    </div>
    <div class="target" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%"></div>
  </div>
</div>

ale czuje że pewnie jest lepsze rozwiązanie, może ktoś pomoże jak to poprawnie rozwiązać...

P.S. wsio pisałem z palca więc może zawierać błędy ;) składniowe

1 odpowiedź

odpowiedź 23 kwietnia 2017 przez Comandeer Guru (601,110 p.)

Być może https://developer.mozilla.org/en/docs/Web/API/Node/contains Ci pomoże

komentarz 23 kwietnia 2017 przez hoktaur Pasjonat (22,250 p.)

Thx z odp. ale co jak ja mam wiele takich zestawów div'ów np.:

<div class="container">
  <div class=" target">
    <div class="targetSubDiv1">
    </div>
    <div class="targetSubDiv2">
    </div>
  </div>
  <div class=" target">
    <div class="targetSubDiv1">
    </div>
    <div class="targetSubDiv2">
    </div>
  </div>
  <div class=" target">
    <div class="targetSubDiv1">
    </div>
    <div class="targetSubDiv2">
    </div>
  </div>
  <div class=" target">
    <div class="targetSubDiv1">
    </div>
    <div class="targetSubDiv2">
    </div>
  </div>
</div>

komentarz 23 kwietnia 2017 przez hoktaur Pasjonat (22,250 p.)

a może powinienem zrobić:

<div class="container">
  <div class=" target">
    <div class="target targetSubDiv1">
    </div>
    <div class="target targetSubDiv2">
    </div>
  </div>
  <div class=" target">
    <div class="target targetSubDiv1">
    </div>
    <div class="target targetSubDiv2">
    </div>
  </div>
  <div class=" target">
    <div class="target targetSubDiv1">
    </div>
    <div class="target targetSubDiv2">
    </div>
  </div>
  <div class=" target">
    <div class="target targetSubDiv1">
    </div>
    <div class="target targetSubDiv2">
    </div>
  </div>
</div>

i potem:

if(event.target.classList.contains('target')) {
  if(event.target.parentNode.classList.contains('target')) event.target = event.target.parentNode;
  coś tam dalej zrób...
}