Prevent parent been clickable while child clicked -not bubbeling issue [duplicate]

Question

I have a grandfather div which is contain 200 "father" divs (and 200 child1 and 200 child2). I want to target "child2" element while clicking on it by create only 1 eventlistener to the "grandfather" and so "child2" element is

event.target.parentElement.lastChild

While clicking twice. Each click on 1 different child2 element i need to stop eventlistener from been active for 2 seconds.

<div class="grandfather">
   <div class="father"> 
         <div class="child1"> </div>
         <div class="child2"> </div>
   </div>
</div>

document.queryselector(".grandfather").addEventListener("click",foo(e))

function foo(e){
if(e.target.parentElement.lastChild){
   // Check if 2 elements been clicked
   // Stop eventlistener for sec
}

I thought its relly to buubling but e.stopPropagation() and e.preventDefault() not working.