單擊某個塊時，如何不計算子塊（例如.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>