javascript - 在 blur/focus 事件中，如果下一个焦点在同一个父元素中，你如何才能让 blur 不触发？

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

这有可能吗？

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

Answer 1

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

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