Javascript 在模糊/聚焦事件中，如果下一个焦点位于同一父元素中，如何使模糊不触发？

我认为这个问题很直截了当。代码如下

<button onclick="toggleMenu()">Show Menu</button>

<div id="parent" class="hidden">
    <input type="text"></input>
    <input type="text"></input>
    <input type="text"></input>
</div>

<script>

    let parent = document.getElementById('parent');

    parent.addEventListener('focus', function () {
        // show parent
    });

    parent.addEventListener('blur', function () {
        // hide parent
    });

</script>

显示菜单
让parent=document.getElementById（'parent'）；
parent.addEventListener（'focus'，function（）{
//显示家长
});
parent.addEventListener（'blur'，函数（）{
//隐藏父对象
});

这个想法是

parent

有点像汉堡包菜单。它有一个外部元素，您可以在其中切换它的可见状态。出于可访问性的原因，我想了解如何根据输入字段的焦点使其可见或显示

这有可能吗

---

上面的代码可以工作，但我担心每次用户更改输入字段时都会调用

onblur（）

和

onfocus（）

。

为要对模糊执行的操作添加一些延迟，并根据在焦点上设置的标志约束操作：

let parent = document.getElementById('parent');
let focused = false;

parent.addEventListener('focus', function () {
    focused = true;
    console.log('show');
}, true);

parent.addEventListener('blur', function () {
    focused = false; // reset the flag
    setTimeout(function () {
        if (focused) return; // cancel if another input focused after the blur
        console.log('hide');
    }, 100);
}, true);

---

您可以在家长电脑上观看mousedown或touchstart事件。若我没记错的话，你们可以检查目标元素是否包含在父元素中，若是的话，阻止事件停止下一个事件，因为这样就不会发生模糊

---

该行为的主要缺点是，该操作不是在单击事件时触发的，用户不能仅取消该操作，而是将光标从按住鼠标按钮的菜单项上移开。

将事件侦听器添加到不在div上的输入字段谢谢您的帮助！但这不是我想要的。焦点/模糊事件仍将在父对象上触发，因为该事件会向上传播到DOM。如果你说的是只将其添加到第一个和最后一个可以工作的输入字段中，那么我正在寻找一种更具可扩展性的方法。