javascript - 使用 Vanilla JavaScript 防止多个 EventListener 发生焦点冲突

Question

我正在扩展我现有的导航以实现可访问性，但是在目标集中时按键盘上的“Enter”时出现问题。当任何其他元素被聚焦时，搜索和/或导航切换的事件监听器会触发，这可以是任何锚点或任何聚焦元素。

鼠标单击单个元素（并单击表单）以它需要的方式起作用。但是，在焦点上然后在页面上的任何位置点击“Enter”，它会触发（如果不是正确的）这两个事件。任何帮助，将不胜感激。

/* Search */

let searchToggle = document.querySelector('.search-toggle'),
  searchForm = document.querySelector('.search-form');

function searchClick(event) {
  event.stopPropagation();
  let toggled = searchToggle.contains(event.target);
  if (toggled) {
    searchForm.classList.add('show-search-form');
  } else if (!event.target.closest('.show-search-form')) {
    searchForm.classList.remove('show-search-form');
  }
}

function searchFocus(event) {
  if (event.keyCode === 13) {
    event.stopPropagation();
    searchToggle.click();
  }
}

document.addEventListener('click', searchClick, false);
document.addEventListener('keyup', searchFocus, false);

/* Navigation */

let navToggle = document.querySelector('.toggle'),
  nav = document.querySelector('.nav');

navToggle.addEventListener('click', () => {
  nav.classList.toggle('toggle-menu');
});

function navFocus(event) {
  if (event.keyCode === 13) {
    event.stopPropagation();
    navToggle.click();
  }
}

document.addEventListener('keyup', navFocus, false);

*:focus-visible {
  outline: 5px solid #333333;
}

.search-form,
.nav {
  display: none;
}

.search-form.show-search-form {
  display: block;
}

.nav.toggle-menu {
  display: block;
}

<div class="search-toggle" tabindex="0">
  <span>Toggle Search</span>
</div>
<div class="search-form">
  <span>Test Form</span>
</div>

<div class="toggle" tabindex="0">
  <span>Toggle Menu</span>
</div>

<nav class="nav">
  <ul>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
  </ul>
</nav>

标签： javascript