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

Question

I think the question is pretty straight forward. The code is below.

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

The idea is that parent is something like a hamburger menu. It has an outside element where you can toggle the visible state of it. For accessibility reasons, I'd like to understand how I can make it visible or showing based on the focus of the input fields.

Is this at all possible?

The code above works but I'm concerned about onblur() and onfocus() being called EVERY time the user changes input fields.

Answer 1

You can watch the mousedown or touchstart event on parent. If I remember it correctly, you can check if target element contained in parent, and if so, prevent event to stop next events, and because of that no blur would happen.

The main disadvantage of that behavior is that the action triggered not on click event, and user can't just cancel it moving cursor away from the menu item holding the mouse button.

Answer 2

Add some delay to the action you want to perform on the blur and constraint the action according to a flag which you set on the focus:

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