Question

我希望下拉菜单在用户离开时关闭。为此，我使用了聚焦事件。

menu.addEventListener('focusout', function (event) {
    if (event.relatedTarget === null || !event.relatedTarget.matches('[data-dropdown-item]')) {
        closeDropdown(this.parentElement.querySelector('[data-dropdown]'));
    }   else {
        return;
    }
});

我在按钮上具有click事件监听器，以打开或关闭下拉菜单。因为当您单击按钮时，您也将焦点从下拉列表移开，所以焦点输出和click事件处理程序都会触发，因此菜单关闭，然后在单击按钮时立即再次打开。

function openOrCloseDropdown(button) {
    if (button.getAttribute('aria-expanded') === 'false') {
        openDropdown(button);
    }   else if (button.getAttribute('aria-expanded') === 'true') {
        closeDropdown(button);
    }
}

Answer 1

如果按钮的点击处理程序是focusout事件的相关目标，则可以“使其静音”；

var menu = document.getElementById('menu'),
    button = document.getElementById('button');

menu.addEventListener('focusout', function (event) {
  menu.className = 'inactive';
  if(event.relatedTarget === button) {
    event.relatedTarget.setAttribute("data-muted", true);
  }
});

button.addEventListener('click', function(event) {
  if(menu.className === 'active'){
    menu.className = 'inactive';
  } 
  else if(!this.getAttribute('data-muted')) {
    menu.className = 'active';
  }
  
  this.removeAttribute('data-muted');
});

.inactive {
  display: none;
}

<ul class="inactive" id="menu" tabindex="1" style="float: left;">
  <li>item1</li>
  <li>item2</li>
</ul>

<button id="button" style="float: right;">Menu</button>

Answer 2

在keyup eventListener中使用!document.activeElement可以正常工作：

    document.addEventListener('keyup', function () {
        if (!document.activeElement.matches('[data-dropdown-item]')) {
            dropdownButtons.forEach(button => {
                closeDropdown(button);
            });
        }
});

聚焦并单击都触发回调

2 个答案: