Задать вопрос

Как реализовать закрытие списка по клику вне его на чистом JS?

Есть кастомный select на Vue
На данный момент закрытие списков реализовано так:
выжимка кода
// в mounted
el.addEventListener('click', function (e) {
  e.stopPropagation() // благодаря этому "не всплыванию" все клики по селекту не закрывают его
  document.addEventListener('click', it.close)
})

// в methods
close () {
  this.opened = false
  document.removeEventListener('click', this.close)
},
open () {
  if (this.disabled) return false
  this.opened = true
}



Но здесь возникает проблема: когда открываешь один select, а потом открываешь второй - событие не всплывает со второго и первый не закрывается, по итогу: оба селекта открыты.

Я думал насчет того, чтобы навешивать клик на документ, проходиться по все родителям e.target и узнавать, child ли это от select или нет, если нет - закрываем.
Но это, как мне кажется, довольно ресурсоемкий код и сам по себе громоздкий, поэтому я его откинул на этапе раздумий.

Как же тогда исполнить задумку?
  • Вопрос задан
  • 335 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
Stalker_RED
@Stalker_RED
document.addEventListener('click', function (e) {
  let parentSelect = e.target.closest('select.active')
  if (parentSelect) {
    parentSelect.classList.remove('active') 
  }
})
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы