单击某个块时，如何不计算子块（例如.child span）？

Question

单击某个块时，如何不计算子块（例如.child span ）？

如果单击.child块， .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

使用.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> 

Answer 2

您可以检查目标是否为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>