den0820
@den0820
Фронтенд Junior разработчик.

Не срабатывает removeEventListener?

Здравствуйте. Передаю функцию - callback, например:
//************************************
тело кода ******************
сама передача колбэка:
callback: Menu.prototype.toggleTag

//**********************************
someConstructor.prototype = {
outputExistTags: function(msg, callback) {
.............some code.................
***********************************
for (var i = 0; i < tagsId.length; i++) {
            var itemList = document.querySelector('[data-target="' + tagsId[i] + '"]');
            itemList.removeEventListener('click', callback);
            itemList.classList.add('tvz-disable');
            console.log(itemList);
        }
}
}


var Menu = function(tags) {
    this.hideBtn = document.getElementById('filters-list_hide');
    this.tags = tags;

    this.hideBtn.addEventListener('click', this.hideAllTabs.bind(this));
};

Menu.prototype = {
    hideAllTabs: function() {
        var tabContents = document.getElementsByClassName('tvz-filter_content'),
            tabSelects = document.getElementsByClassName('tvz-filter');

        for (var i = 0; i < tabContents.length; i++) {
            if (tabContents[i].classList.contains('tvz-hide') === false) {
                tabContents[i].classList.toggle('tvz-hide');
            }
        }
        for (var i = 0; i < tabSelects.length; i++) {
            if (tabSelects[i].classList.contains('tvz-filter-open') === true) {
                tabSelects[i].classList.toggle('tvz-filter-open');
            }
        }

        this.hideBtn.style.display = 'none';

        return false;
    },
    toggleTab: function(e) {
        var target = e.target,
            tabId = e.target.getAttribute('data-select'),
            tabEl = document.getElementById(tabId),
            closed = tabEl.classList.contains('tvz-hide');

        this.hideAllTabs();

        if (closed) {
            tabEl.classList.toggle('tvz-hide');
            this.hideBtn.style.display = 'block';

            /*  Скролл к открытому блоку фильтрации и простановка класса селектам (мобильная версия и десктопная) */
            document.querySelector('[data-select="' + tabId + '"]').classList.add('tvz-filter-open');

            var _top = $(target).offset().top;

            if(_top){
                $('html, body').scrollTop(_top - (($('.navbar').css('position') == 'fixed') ? 95 : 10));
            }
        }
    },
    toggleTag: function(e) {
        var targetTagId = e.target.getAttribute('data-target');

        e.target.classList.toggle('selected');

        if (e.target.classList.contains('selected')) {
            var targetTagName = e.target.innerHTML;
            this.tags.include(targetTagId, targetTagName);
        } else {
            this.tags.remove(targetTagId);
        }

        return false;
    }
};

В конструкцию углубляться не буду, но есть некий прототип конструктора, с методом, принимающим функцию колбэк, которая меня интересует. В методе при определенных манипуляциях необходимо удалить у всех элементов в цикле обработчик события КЛИК.

Так вот, почему то данная инструкция: itemList.removeEventListener('click', callback); не работает. Помогите пофиксить
  • Вопрос задан
  • 2153 просмотра
Пригласить эксперта
Ответы на вопрос 2
k12th
@k12th
console.log(`You're pulling my leg, right?`);
removeEventListener не сработает, если не передавать точно ту же функцию, которую передали в addEventListener. Я лично столкнулся с таким однажды, когда думал, что fn.bind(ctx) возвращает один и тот же объект каждый раз, а оказалось, что нет. То есть: fn.bind(ctx) !== fn.bind(ctx). Возможно, это ваш кейс, т.к. Menu.prototype.toggleTag явно должен исполняться в определенном контексте, но точнее сказать невозожно, так как почти вся эта приведенная простыня не имеет к проблеме никакого отношения. Покажите минимально неработающий пример, если хотите помощи.
Ответ написан
@schurin
Люблю катать с гор, особенно на санках
Не стоит вешать обрработчики и снимать их потом используя анонимные функции

outputExistTags: function(msg, callback) {
.............some code.................
***********************************
for (var i = 0; i < tagsId.length; i++) {
var itemList = document.querySelector('[data-target="' + tagsId[i] + '"]');
itemList.removeEventListener('click', callback);
itemList.classList.add('tvz-disable');
console.log(itemList);
}
}
}

Вы же передаёте анонимную функцию, у вашего обработчика совсем другой callback
Можно складировать callback'и связывая с типами событиями
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы