0

Есть следующий фрагмент 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>
2
  • повесить событие на body, а в полученном event смотреть target
    – Zhihar
    30 ноя 2020 в 12:12
  • @Zhihar, точно! Спасибо, сейчас попробую!
    – trek89
    30 ноя 2020 в 12:14

3 ответа 3

1

При добавлении обработчика события с помощью .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>

11
  • Кажется плохой практикой, создание избыточного кол-ва слушателей
    – mego4iter
    30 ноя 2020 в 12:47
  • @mego4iter, все зависит от того, как определять избыточность
    – Grundy
    30 ноя 2020 в 12:51
  • наличием более оптимального решения?
    – mego4iter
    30 ноя 2020 в 12:59
  • @mego4iter, а как определять оптимальность? :-)
    – Grundy
    30 ноя 2020 в 13:06
  • логически? к примеру 1 слушатель лучше чем 3? =)
    – mego4iter
    30 ноя 2020 в 13:24
0

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>

0
0

Через 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 элкмент)
} 
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.