Блог

Главная - Вопросы по программированию - Предотвратите столкновение нескольких списков событий при фокусировке с помощью ванильного JavaScript

Предотвратите столкновение нескольких списков событий при фокусировке с помощью ванильного JavaScript

#javascript

Вопрос:

Я расширяю существующую навигацию для обеспечения доступности, но у меня возникают проблемы при нажатии кнопки «Ввод» на клавиатуре, пока цель сфокусирована. Списки событий для переключения поиска и/или навигации срабатывают, когда фокусируется какой-либо другой элемент, это может быть любой якорь или любой сфокусированный элемент.

Щелчок мышью по отдельным элементам (и щелчок вне формы) работает так, как это необходимо. Однако при фокусировке, а затем при нажатии «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>

Комментарии:

1. Включенный прослушиватель событий document сработает, когда событие произойдет в любом месте. Почему бы ему не уволить обоих слушателей?

2. @Бармар, Это не должно было случиться, но я понятия не имею. Я думал, что event.stopPropagation() решит эту проблему.

3. Я согласен с Бармаром. Начните с добавления дополнительной специфики для слушателей ваших мероприятий.

4. Проверьте разницу между event.StopPropagation() и event.stopImmediatePropagation() . Я подозреваю, что вы хотите последнее.

5. @Barmar Да, я пробовал последнее, как в заявлении if, так и за его пределами, но, к сожалению, все равно не повезло.

Метки: