如何实现点击区块时不统计.child span这类子区块的点击次数？

你遇到的问题核心是事件冒泡和目标元素判断不准确：当点击.child内部的<span>时，event.target指向的是<span>而非.child，此时你的代码不会触发.child的样式变化，但countClick依然会自增，最终导致计数和实际点击的有效.child数量不匹配。

下面是修复后的完整代码，同时优化了类名操作的安全性：

修改后的JavaScript代码 #

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

parent.onclick = function(event) {
  // 从点击元素向上查找最近的.child容器
  const targetChild = event.target.closest('.child');
  
  // 只处理存在且未被隐藏的child元素
  if (targetChild && !targetChild.classList.contains('child-hide')) {
    targetChild.classList.add('child-click');
    setTimeout(function() {
      targetChild.classList.remove('child-click');
      targetChild.classList.add('child-hide');
    }, 3000);
    
    // 仅在有效点击时计数
    countClick++;
    console.log(countClick);
    
    // 检查是否所有child都已点击完成
    if (childLength === countClick) {
      setTimeout(function() {
        parent.innerHTML = 'All right';
      }, 3000);
    }
  }
}

CSS代码（无需修改） #

.parent { display: flex; }
.child { padding: 15px; background: #ccc; margin: 10px; }
.child-click { background: #f00; }
.child-hide { display: none; }

HTML代码（无需修改） #

<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>

关键改动说明 #

1. 使用closest('.child')定位目标：这个方法会从点击的元素开始向上遍历DOM树，找到最近的带有.child类的元素，不管你点击的是.child本身还是它的子元素（比如<span>），都能正确定位到对应的容器。
2. 增加重复点击拦截：通过!targetChild.classList.contains('child-hide')判断，避免重复点击已经被隐藏的.child元素，防止计数错误增加。
3. 调整计数时机：把countClick++移到有效点击的判断逻辑内，只有当成功找到未被处理的.child元素时才计数，彻底解决了点击子元素时的错误计数问题。
4. 安全操作类名：改用classList.add()/remove()替代直接修改className，避免覆盖原有类名，让类名操作更稳定。

内容的提问来源于stack exchange，提问作者ivansimonov007