Klicken auf Kinder verwischt Elternelement

Question

Also ich versuche, ein Login-Dropdown zu machen, aber bis jetzt kann ich nicht. Wenn ich auf eine Eingabe im Dropdownfeld klicke, wird das Elternelement verwischt und verschwindet.

<div tabindex=0 class="dropdown"> 
    <a href="#">Open</a> 
    <div><form action=""> 
    <input type="text"> 
    </form></div> 
</div> 

css

.dropdown{ 
    position: relative; 
} 

.dropdown > a { 
    display:relative; 
    padding: 10px; 
    background: #e5e5e5; 
} 

.dropdown > div{ 
    display:none; 
} 

.open > div { 
    display: block; 
} 

js

Array.from(document.getElementsByClassName('dropdown')).forEach((element) => { 
    element.getElementsByTagName('a')[0].addEventListener('click',() => { 
    if(element.classList.contains('open')){ 
     element.classList.remove('open') 
    } else { 
     element.classList.add('open') 
     element.focus(); 
    } 
    }) 

    element.addEventListener('blur',() => { 
    element.classList.remove('open') 
    }) 

}) 

Demo https://jsfiddle.net/owtm649b/6/

Answer 1

Ich löse es, indem ich div Blur-Ereignis für Body-Click-Ereignis und eine StopPropagation ersetzt, wenn Klicks auf dieses div auftreten.

element.addEventListener('click', (e)=>{ 
     e.stopPropagation(); 
}) 

document.body.addEventListener('click',()=>{ 
     element.classList.remove('open') 
}) 

Answer 2

ändern

element.focus(); 

zu:

element.getElementsByTagName("input")[0].focus(); 

this See.

Sie brächten Fokus auf die einen Tag das würde Unschärfe wenn Sie auf den Input-Tag konzentriert und damit das offene Menü schließen.