Приложить условия к eventTarget - PullRequest
Новая
       8

Приложить условия к eventTarget

0 голосов
/ 31 января 2020

это мой первый вопрос здесь. Это, вероятно, очень просто, но у меня есть некоторые проблемы с eventListeners и event.target. Итак, вот html и мой JS, и что я хочу сделать, когда я нажимаю на элемент IMG, я хочу знать, находится ли он в 'player1Div' или 'player2Div'. Мне удалось создать eventListener для всего «раздела» и заставить его срабатывать, когда я нажимаю на e.target.tagName = 'IMG', однако я не знаю, как отличить guish между player1Div и player2Div

Вот HTML

<section class="cards">
    <div id="player1Div">
        <img src="images/card.jpg" name="2" />
        <img src="images/card.jpg" name="15" />
        <img src="images/card.jpg" name="4" />
        <img src="images/card.jpg" name="12" />
        <img src="images/card.jpg" name="6" />
        <img src="images/card.jpg" name="10" />
        <img src="images/card.jpg" name="8" />
        <img src="images/card.jpg" name="9" />
    </div>
    <div id="result">
        <span></span>
        <span>vs</span>
        <span></span>
    </div>
    <div id="player2Div">
        <img src="images/card.jpg" name="10" />
        <img src="images/card.jpg" name="14" />
        <img src="images/card.jpg" name="9" />
        <img src="images/card.jpg" name="7" />
        <img src="images/card.jpg" name="11" />
        <img src="images/card.jpg" name="5" />
        <img src="images/card.jpg" name="13" />
        <img src="images/card.jpg" name="3" />
    </div>

Вот JS для списка событий: 

    section.addEventListener('click', e => {
    if (e.target.tagName === 'IMG') {
        //add to an array of either player1 results or player2 results, depending on the 'click'
    }
});

Ответы [ 2 ]

0 голосов
/ 31 января 2020

Поскольку вы добавляете прослушиватели событий в div по их идентификатору, этот раздел вашего кода уже знает, какой идентификатор вы просматриваете. Так что вы можете просто сослаться на это; например: 

document.getElementById('player1Div').addEventListener('click', e => {
  if (e.target.tagName.toLowerCase() === 'img') {
    // You're in player1Div!
  }
});
document.getElementById('player2Div').addEventListener('click', e => {
  if (e.target.tagName.toLowerCase() === 'img') {
    // You're in player2Div!
  }
});

В качестве альтернативы, если вам нужно добавить обработчик щелчков на весь раздел, вы можете использовать свойство parentNode цели, чтобы получить DIV, а затем получить доступ к его идентификатору: 

const section = document.querySelector('section.cards');
section.addEventListener('click', e => {
  if (e.target.tagName.toLowerCase() === 'img') {
    const parentID = e.target.parentNode.id;
    // Do what you want based on the parentID!
  }
});

Единственная проблема, связанная с последним подходом, заключается в том, что если вы измените структуру ваших DIV - например, поместите другой внутренний контейнер вокруг изображений - он сломается, а первый - нет. В конечном итоге вам придется изменить способ обхода DOM, то есть добавить более или менее parentNodes, возможно, также nextSiblings. Вот почему я рекомендую первый подход.

0 голосов
/ 31 января 2020

Вы можете использовать parentNode, чтобы получить родителя и оттуда получить идентификатор. Затем вы можете добавить любой массив, который вы хотите, основываясь на этом. 

document.addEventListener('DOMContentLoaded', () => {

  const section = document.getElementsByTagName('section')[0]
  const player1 = []
  const player2 = []

  section.addEventListener('click', e => {
      if (e.target.tagName === 'IMG') {
          const parentDiv = e.target.parentNode.attributes.id.value
           
          // there are better ways to do this but let's keep it simple
          if (parentDiv === 'player1Div') {
            player1.push(e.target)
          } else {
            player2.push(e.target)
          }
      }
      
      const result = document.getElementById('result')
      const player1Result = result.getElementsByTagName('span')[0]
      const player2Result = result.getElementsByTagName('span')[2]
      
      player1Result.innerText = player1.length
      player2Result.innerText = player2.length
  })
  
 })
<section class="cards">
    <div id="player1Div">
        <img src="images/card.jpg" name="2" />
        <img src="images/card.jpg" name="15" />
        <img src="images/card.jpg" name="4" />
        <img src="images/card.jpg" name="12" />
        <img src="images/card.jpg" name="6" />
        <img src="images/card.jpg" name="10" />
        <img src="images/card.jpg" name="8" />
        <img src="images/card.jpg" name="9" />
    </div>
    <div id="result">
        <span></span>
        <span>vs</span>
        <span></span>
    </div>
    <div id="player2Div">
        <img src="images/card.jpg" name="10" />
        <img src="images/card.jpg" name="14" />
        <img src="images/card.jpg" name="9" />
        <img src="images/card.jpg" name="7" />
        <img src="images/card.jpg" name="11" />
        <img src="images/card.jpg" name="5" />
        <img src="images/card.jpg" name="13" />
        <img src="images/card.jpg" name="3" />
    </div>
</section>
...