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

Question

我认为这个问题很直接。 代码如下。

<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就像一个汉堡包菜单。 它有一个外部元素，您可以在其中切换它的可见状态。 出于可访问性原因，我想了解如何根据输入字段的焦点使其visible或showing 。

这是可能吗？

上面的代码有效，但我担心onblur()用户更改输入字段时都会调用onblur()和onfocus() 。

Answer 1

您可以在 parent 上观看 mousedown 或 touchstart 事件。 如果我没记错的话，您可以检查父元素中是否包含目标元素，如果是，则阻止事件停止下一个事件，因此不会发生模糊。

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

Answer 2

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

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);