javascript - 单击 block 时如何不计算子 block (示例 .child 跨度)？

Question

单击 block 时如何不计算子 block (示例 .child span)？

如果你点击 block .child 没问题。但是，如果您的点击击中 block .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

使用.closest() 获取最近的具有.child 类的元素像这样:

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>