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()和onfocus()。

Answer 1

您可以在父级上观看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);

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

2 个答案: