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

Question

[Денис]

Здравствуйте. Передаю функцию - 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); не работает. Помогите пофиксить

Answer 1

[Константин Китманов]

removeEventListener не сработает, если не передавать точно ту же функцию, которую передали в addEventListener. Я лично столкнулся с таким однажды, когда думал, что fn.bind(ctx) возвращает один и тот же объект каждый раз, а оказалось, что нет. То есть: fn.bind(ctx) !== fn.bind(ctx). Возможно, это ваш кейс, т.к. Menu.prototype.toggleTag явно должен исполняться в определенном контексте, но точнее сказать невозожно, так как почти вся эта приведенная простыня не имеет к проблеме никакого отношения. Покажите минимально неработающий пример, если хотите помощи.

Comments

[Денис]

var Utils = {
    outputExistTags: function(msg, callback) {
        var filter = msg.result.catalog_list_filters,
            tagsFiltered = [],
            tagsId = [],
            tags = document.getElementsByClassName('filters-list_item');

        for (var i = 0; i < tags.length; i++) {
            var id = tags[i].getAttribute('data-target');
            tagsId.push(id);
        }

        for (var i = 0; i < filter.length; i++) {
            var item = document.querySelector('[data-target="' + filter[i].mark__id + '"]');

            if(item) {
                item.classList.remove('tvz-disable');
                tagsFiltered.push(item);
            }
        }

        for (var i = 0; i < tagsFiltered.length; i++) {
            var filterId = tagsFiltered[i].getAttribute('data-target'),
                pos = tagsId.indexOf(filterId);

            tagsId.splice(pos, 1);
        }

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

        //console.log('TagsId Array: ', tagsId, tagsId.length);
        //console.log('tagsFiltered Array: ',tagsFiltered, tagsFiltered.length);
        console.log(callback);
    }
}

[Денис]

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;
    }
};

var Filter = function (storage) {
    this.storage = storage;
    var initParams = this.storage.get();

    var wrapper = document.getElementById('filters-list_selected');
    this.hideBtn = document.getElementById('filters-list_hide');

    var tags = new Tags(wrapper, storage);
    var years = new Years(wrapper, storage);
    var sort = new Sort(document.getElementById('wrapper-sort'), storage);
    var menu = new Menu(tags);

    var selectedList = document.getElementById('filters-list_selected');

    //this.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;
    //};
    //
    //this.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));
    //        }
    //    }
    //};
    //
    //this.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;
    //        tags.include(targetTagId, targetTagName);
    //    } else {
    //        tags.remove(targetTagId);
    //    }
    //
    //    return false;
    //};
    //
    //this.hideBtn.addEventListener('click', this.hideAllTabs.bind(this));

    rd('app.catalog.reset').subscribe(function() {
        if (selectedList.childNodes.length > 1) {
            selectedList.classList.remove('tvz-hide');
        } else {
            selectedList.classList.add('tvz-hide');
        }
    });

    if (initParams.tags != null && initParams.tags.length > 0) {
        for (var index = 0; index < initParams.tags.length; index++) {
            var tagId = initParams.tags[index];
            var tagSelect = document.querySelector('[data-target="' + tagId + '"]');
            tagSelect.className += ' selected';
            var tagName = tagSelect.innerHTML;
            tags.include(tagId, tagName, false);
        }
    }

    if (initParams.till_year) {
        years.addYear(initParams.till_year, 'till_year', false);
        years.years_slider.noUiSlider.set([null, initParams.till_year]);
    }

    if (initParams.from_year) {
        years.addYear(initParams.from_year, 'from_year', false);
        years.years_slider.noUiSlider.set([initParams.from_year, null]);
    }

    if ((initParams.tags != null && initParams.tags.length > 0)
        || initParams.till_year || initParams.from_year) {
        selectedList.classList.remove('tvz-hide');
    }

    var list_items = document.getElementsByClassName('filters-list_item');
    for (var i = 0; i < list_items.length; i++) {
        console.log('list_items: ' + i, list_items[i]);
        list_items[i].addEventListener('click', menu.toggleTag.bind(menu));
    }

    var tab_buttons = document.getElementsByClassName('tvz-filter');

    for (var tabIndex = 0; tabIndex < tab_buttons.length; tabIndex++) {
        tab_buttons[tabIndex].addEventListener('click', menu.toggleTab.bind(menu));
    }
};

[Денис]

var Years = function (wrapper, storage) {
****************************************
rd('app.tags.changed').subscribe(function(msg) {
utils.outputExistTags(msg.data, msg.callback);
});
};

Years.prototype = {
getFilterGroupTags: function(from_year, till_year) {
var self = this;

webapi.catalog.listFilters({
method: 'GET',
data: {
from_year: from_year,
till_year: till_year
}
}).then(function(resp) {
if(resp && resp.status === 0) {
rd('app.years.changed').broadcast({
data: resp,
callback: Menu.prototype.toggleTag
});
} else {
console.log('Wrong params');
}
});
},
}

[Денис]

var Tags = function (wrapper, storage) {
    this.wrapper = wrapper;
    this.storage = storage;
    this.clearBtn = document.getElementById('filters-list_clear');
    document.getElementById('filters-list_clear').addEventListener('click', this.clear.bind(this));

    rd('app.years.changed').subscribe(function(msg) {
        utils.outputExistTags(msg.data, msg.callback);
    });
};

Tags.prototype = {
    getFilterGroupTags: function(tags) {
        var self = this;
        tags = tags.join(',');

        webapi.catalog.listFilters({
            method: 'GET',
            data: {
                tags: tags
            }
        }).then(function(resp) {
            if(resp && resp.status === 0) {
                rd('app.tags.changed').broadcast({
                    data: resp,
                    callback: Menu.prototype.toggleTag
                });
            } else {
                console.log('Wrong params');
            }
        });
    },
}

[Денис]

Это минимально работающий код. Но боюсь, что даже здесь много объема будет)

[Константин Китманов]

Денис: вы, должно быть, шутите. Очередная простыня (даже три) нерелевантного кода это не «минимально нерабочий пример». Если вам непонятно, то поясню: воспроизведите свою проблему на jsfiddle в максимум 10-20 строчках (я уверен, что можно в 5). Но, на первый взгляд, проблема именно в том, о чем я писал.

[Lite_robot]

Константин Китманов: а какую функцию нужно передать если не точно такую же?

Answer 2

[Артём Щурин]

Не стоит вешать обрработчики и снимать их потом используя анонимные функции

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'и связывая с типами событиями

Comments

[Денис]

хорошо, но как выцепить колбэк из фрагмента

for (var i = 0; i < list_items.length; i++) {
        console.log('list_items: ' + i, list_items[i]);
        list_items[i].addEventListener('click', menu.toggleTag.bind(menu));
    }