Как удалить addEventListener?

Question

[Alex]

Добрый день, подскажите пожалуйста делаю кастомный select по клику вне он доложен закрываться, при добавлении mounted() и beforeDestroy() перестает работать toggle(), то есть при клике на сам select он раскрывается но при клике повторно на него он не закрывается.

hideSelected(){
          this.visibelOptions = false
      }
    },
    mounted() {
      window.addEventListener('click', this.hideSelected, true);
    },
    beforeDestroy(){
      window.removeEventListener('click', this.hideSelected, true);
    }

Comments

[Вадим]

База.
https://learn.javascript.ru/bubbling-and-capturing

Вы в mounted вешаете обработчик клика на селект. Селект у Вас внутри window лежит? (Глупый вопрос).

Соответственно, кликнули на селект - этот обработчик отработал.

[Alex]

Вадим почему глупый ? Я и написал как мне удалить window.addEventListener('click', this.hideSelected, true), что бы он после клика снимался прослушивальщик.

[Вадим]

Alex,

почему глупый ?

Так это я про свой вопрос, который Вам задал. "Лежит ли селект внутри window?". Лежит и иного быть не может.

что бы он после клика снимался прослушивальщик.

Ну так напишите в функции обработчике клика снятие этой же функции с window. То есть тоже самое, что у Вас в beforeDestroy.

Но выглядит так, что Вам на самом деле просто нужно проверять, открыт ли селект в данный момент, и если открыт, то одно, если нет, то другое.

[Alex]

Вадим, я так и сделал и не работает поэтому и пишу. if(this.visibelOptions === true) {тогда select открывается}else {this.visibelOptions = false (закрывается}, на window все работает по клику вне select можно и document поставить, но select не закрывается и я не понимаю почему не ремувиться addEventListener, ту ссылку которую вы сбросили четко написано window.addEventListener('click', this.hideSelected, true), а потом window.removeEventListener('click', this.hideSelected, true), но remove не работает.

[Вадим]

Alex, Ну полагаю, если у Вас не работает стандартный глобальный метод, такой как .removeEventListener() - нужна демка, на условном codesandbox, либо займитесь отладкой через инструменты разработчика, может не доходит до него вообще, вот он и не срабатывает.

https://learn.javascript.ru/debugging-chrome

[Alex]

Вадим есть принципе такое решение, но здесь для класса, а на tailwind делаю, не могу понять почему только так срабатывает.

hideSelect(e) {
      if (!document.querySelector(".title").contains(e.target)) {
        this.areOptionsVisible = false;
      }
  }

[Farkl]

почему ты пишешь на vue2?

Answer 1

[Антон Антон]

Почему в заголовке пишешь про удаление обработчика, но при этом говоришь, что обработчик не срабатывает (т.е. не подцепляется)?
Вообще если бы было больше кода или пример на jsfiddle/codepen, оно было бы понятнее, но сейчас чисто визуально моему телепату кажется, что используется options api и при этом mounted и beforeDestroy находятся внутри methods а не на первом уровне (где должны быть хуки жизненного цикла компонента).

UPD: проблема в том, что клик сначала отрабатывает на компоненте, потом на документе и в итоге ничего не происходит. Правильнее всего отключить всплытие в обработчике:

toggle(e){
    e.stopPropagation()
   this.visibelOptions = true
      },

но можно и (например) сделать показ позже:

toggle(e){
    this.$nextTick().then(()=>
   this.visibelOptions = true)
      },

toggle(e){
    setTimeout(()=>
   this.visibelOptions = true, 0)
      },

или добавить проверку на скрытии:

hideSelected(e){
  if (this.$el !== e.target)
          this.visibelOptions = false
      }

Comments

[Alex]

Антон Антон скорее всего опечатался, я вынес сразу их из methods, они на первом уровне.

methods: {
      toggle(){
          this.visibelOptions = true
      },
      selectOption(option){
        this.$emit('select', option)
        this.visibelOptions = false;
      },
      hideSelected(e){
          this.visibelOptions = false
      }
    },
    mounted() {
      document.addEventListener('click', this.hideSelected, true);
    },
    beforeDestroy(){
      document.removeEventListener('click', this.hideSelected, true);
    }

Есть решение, но я на tailwind делаю не хотелось бы классы лишние вешать.

hideSelect(e) {
      if (!document.querySelector(".title").contains(e.target)) {
        this.areOptionsVisible = false;
      }
  }

[Антон Антон]

Alex, обновил ответ

[Alex]

Антон Антон, спасибо тебе огромное за ответ. Но все варианты не рабочие, я сразу про e.stopPropagation() и подумал, но кидает ошибку TypeError: Cannot read properties of undefined (reading 'stopPropagation'). Остальные не работают.

hideSelected(e){
  if (this.$el !== e.target)
          this.visibelOptions = false
      }

Этот вариант не работает не видит элемента undefined $el, сегодня все утро провозился и класс ставил с готовых решением не работает. ХЗ, что за причина.

[Антон Антон]

Alex, а как в шаблоне подцеплен обработчик? @click="toggle" или @click="toggle()"? нужно без скобок, тогда заработает. Опять же, ниже правильно пишут про модификатор: @click.stop="toggle", но мне это нравится меньше, так как в некотором роде переносит логику в шаблон (хоть в данном конкретном случае и не очень критично).
Вообще без живого примера на jsfiddle/codepen сложно.

[Alex]

Антон Антон, спасибо тебе огромное не вижу свою ошибку все поменял и скобки убрал ничего не работает, позже попробую ещё раз.

Answer 2

[zxf]

Для таких ситуаций лучше вешать событие открытия на сам select или лейбл связанный с инпутом. Одним словом, на элемент, по которому раскрывается список. В методе обработчике этого @click реализовывать привязку и отвязку слушателя к/от глобальному объекту (window). Обработчик этого глобального слушателя должен проверять, на каком элементе произошло событие и вызывать соответствующие методы. И не забывайте о всплытии событий. Чтобы избежать всплытия во Vue существует модификатор .stop (@click.stop).

Comments

[Alex]

zxf добрый день, а можно пример пожалуйста, чтобы понимать как это работает ?

[zxf]

Alex,
1) На элементе в шаблоне <tag @click.stop="onClick"></tag>
2) В методах компонента:

onClick(event) {
    ЕСЛИ (выпадающий список закрыт)
        открыть выпадающий список;
        повесить слушатель на окно (window.addEventListener(...));
    ИНАЧЕ
        закрыть выпадающщий список;
        снять слушатель окна;
}

Очень условно, но логика должна быть ясна. Конечно, каждую инструкцию (кроме открытия / закрытия списка) надо разбивать на различные методы, чтобы все это не превратилось в кашу.

Обратите внимание, метод onClick(event) принимает event - объект JS события. Это клаччессический объект события, из которого мы можем получить таргет (event.target), предотвратить дефолтное поведение обработчика (event.preventDefault()) и т.д.

[Alex]

zxf, спасибо большое