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

Question

[Денис Букреев]

Есть кастомный 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 или нет, если нет - закрываем.
Но это, как мне кажется, довольно ресурсоемкий код и сам по себе громоздкий, поэтому я его откинул на этапе раздумий.

Как же тогда исполнить задумку?

Answer 1

[Stalker_RED]

document.addEventListener('click', function (e) {
  let parentSelect = e.target.closest('select.active')
  if (parentSelect) {
    parentSelect.classList.remove('active') 
  }
})

Comments

[Денис Букреев]

Не знал, что в нативном JS есть метод closest

Блин, почитал: IE и Safari не поддерживают(

[Stalker_RED]

Денис Букреев, есть полифилл.

[Денис Букреев]

Stalker_RED, точно