Как я не могу сосчитать дочерний блок (например, .child span) при нажатии на блок?

Question

Как не подсчитать дочерний блок (пример .child span) при нажатии на блок?

Если вы нажмете на блок .child, это нормально. Но если ваш клик попадает в блок .child span, появляется ошибка

var parent = document.querySelector('.parent');
var childLength = document.querySelectorAll('.child').length;
var countClick = 0;

parent.onclick = function(event) {

  var target = event.target;

  if (target.className == 'child') {
    target.className = 'child child-click';

    setTimeout(function() {
      target.className = 'child child-hide';
    }, 3000);
  }

  console.log(countClick);
  countClick++;

  if (childLength == countClick) {
    setTimeout(function() {
      parent.innerHTML = 'All right';
    }, 3000);

  }

}

.parent {
  display: flex;
}

.child {
  padding: 15px;
  background: #ccc;
  margin: 10px;
}

.child-click {
  background: #f00;
}

.child-hide {
  display: none;
}

<div class="parent">
  <div class="child"><span>1</span></div>
  <div class="child"><span>2</span></div>
  <div class="child"><span>3</span></div>
  <div class="child"><span>4</span></div>
</div>

Вот мой код на JSFiddle .

Как решить эту проблему?

Спасибо. Буду рад любой помощи.

Answer 1

Вы можете проверить, является ли цель span или нет. Если цель span, измените цель на ее родителя:

var parent = document.querySelector('.parent');
var childLength = document.querySelectorAll('.child').length;
var countClick = 0;

parent.onclick = function(event) {

  var target = event.target;
  target = target.nodeName == 'SPAN'? target.parentNode : target;
  
  if (target.className == 'child') { 
    target.className = 'child child-click';

    setTimeout(function() {
      target.className = 'child child-hide';
    }, 3000);
  }

  console.log(countClick);
  countClick++;

  if (childLength == countClick) {
    setTimeout(function() {
      parent.innerHTML = 'All right';
    }, 3000);

  }

}

.parent {
  display: flex;
}

.child {
  padding: 15px;
  background: #ccc;
  margin: 10px;
}

.child-click {
  background: #f00;
}

.child-hide {
  display: none;
}

<div class="parent">
  <div class="child"><span>1</span></div>
  <div class="child"><span>2</span></div>
  <div class="child"><span>3</span></div>
  <div class="child"><span>4</span></div>
</div>

Answer 2

Получите ближайший элемент класса .child с .closest () , например, так:

var target = event.target.closest('.child');

var parent = document.querySelector('.parent');
var childLength = document.querySelectorAll('.child').length;
var countClick = 0;

parent.onclick = function(event) {

  if(event.target === parent) {
      console.log("return cause it's the parent");
      return;
  }

  var target = event.target.closest('.child');
  
  if (target.className == 'child') {
    target.className = 'child child-click';

    setTimeout(function() {
      target.className = 'child child-hide';
    }, 3000);
  }

  console.log(countClick);
  countClick++;

  if (childLength == countClick) {
    setTimeout(function() {
      parent.innerHTML = 'All right';
    }, 3000);

  }

}

.parent {
  display: flex;
}

.child {
  padding: 15px;
  background: #ccc;
  margin: 10px;
}

.child-click {
  background: #f00;
}

.child-hide {
  display: none;
}

<div class="parent">
  <div class="child"><span>1</span></div>
  <div class="child"><span>2</span></div>
  <div class="child"><span>3</span></div>
  <div class="child"><span>4</span></div>
</div>

это то, что вы хотите?

Вариант 2 Посмотрите на это. Это еще один способ решить ваши проблемы, настроив прослушиватель событий непосредственно на дочерние элементы. Код должен быть понятен, но оставить комментарий, если что-то не понятно.

var elements = document.querySelectorAll('.child');
var countClick = 0;

elements.forEach(function(element){
    element.addEventListener('click', function(){

        element.classList.add('child-click');
        
        setTimeout(function() {
            element.classList.add('child-hide');
        }, 3000);
         
        console.log(countClick);
        countClick++;
        
        if (elements.length == countClick) {
            setTimeout(function() {
                element.parentNode.innerHTML = 'All right';
            }, 3000);

        }
    });

});

.parent {
  display: flex;
}

.child {
  padding: 15px;
  background: #ccc;
  margin: 10px;
}

.child-click {
  background: #f00;
}

.child-hide {
  display: none;
}

<div class="parent">
  <div class="child"><span>1</span></div>
  <div class="child"><span>2</span></div>
  <div class="child"><span>3</span></div>
  <div class="child"><span>4</span></div>
</div>