Javascript 单击子元素会模糊父元素

因此，我试图使登录下拉列表，但直到现在我不能。当我单击下拉列表中的输入时，它会模糊父元素并消失

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

js

演示 改变

 element.focus();

致：

看

---

您将焦点放在a标记上，当您将焦点放在输入标记上时，a标记会模糊，因此关闭“打开”菜单。

我将div blur事件替换为body click事件，并在该div上单击时替换StopperPagation来解决此问题

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

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

---

你用的是角形的吗？这是行不通的，作为一个登录下拉列表，我还有另一个输入，还有一个用于记住的复选框。所以当我改变焦点时，它就会消失

 element.focus();

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

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

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