Как с помощью JS определить по какому именно из блоков был произведён клик?

Question

Есть следующий фрагмент HTML кода. Если пользователь кликает по одному из блоков внутри блока main, получить по какому именно из блоков с классом "card" был клик. Как это можно сделать с помощью чистого JS?

<div class="main">
    <div class="card">
        <a class="green" href="cards.html">
            <img src="assets/img/folder1/1.jpg" alt="img_1">
            <p>img 1</p>
        </a>                    
    </div>              
    <div class="card">
        <a class="green" href="">
            <img src="assets/img/folder2/2.jpg" alt="img_2">
            <p>img 2</p>
        </a>                    
    </div>
    <div class="card">
        <a class="green" href="">
            <img src="assets/img/folder3/3.jpg" alt="img_3">
            <p>img 3</p>
        </a>                    
    </div>
</div>

Answer 1

document.querySelector('.main').addEventListener('click', e => {
  e.preventDefault()

  var card = e.target.closest('.card')
  card && console.log(card.dataset.id)
})

<div class="main">
  <div class="card" data-id="1">
    <a class="green" href="cards.html">
      <img src="assets/img/folder1/1.jpg" alt="img_1">
      <p>img 1</p>
    </a>
  </div>
  <div class="card" data-id="2">
    <a class="green" href="">
      <img src="assets/img/folder2/2.jpg" alt="img_2">
      <p>img 2</p>
    </a>
  </div>
  <div class="card" data-id="3">
    <a class="green" href="">
      <img src="assets/img/folder3/3.jpg" alt="img_3">
      <p>img 3</p>
    </a>
  </div>
</div>

Answer 2

Через onclick и event.target

<div class="card" onclick="onClick(event)">
        <a class="green" href="cards.html">
            <img src="assets/img/folder1/1.jpg" alt="img_1">
            <p>img 1</p>
        </a>                    
</div>

function onClick(event) {
  var clickBy = event.target.closest('.card'); // элемент инициировавший вызов (card элкмент)
}

Answer 3

При добавлении обработчика события с помощью .addEventListener в качестве this внутри обработчика устанавливается элемент, к которому этот обработчик добавлен.

document.querySelectorAll('.card').forEach(card => card.addEventListener('click', function(e) {
  e.preventDefault()
  console.log(this.dataset.id)
}));

<div class="main">
  <div class="card" data-id="1">
    <a class="green" href="cards.html">
      <img src="assets/img/folder1/1.jpg" alt="img_1">
      <p>img 1</p>
    </a>
  </div>
  <div class="card" data-id="2">
    <a class="green" href="">
      <img src="assets/img/folder2/2.jpg" alt="img_2">
      <p>img 2</p>
    </a>
  </div>
  <div class="card" data-id="3">
    <a class="green" href="">
      <img src="assets/img/folder3/3.jpg" alt="img_3">
      <p>img 3</p>
    </a>
  </div>
</div>

БЛОГ НА HUSL

Как с помощью JS определить по какому именно из блоков был произведён клик?

Ответы (3 шт):