Почему не работает removeEventListener?

Question

[Никита Токарев]

Перечитал много топиков на эту тему, но не могу понять почему не убирается обработчик с элемента. Данный скрипт рассчитан на блокировку фокуса табом на элементе с последующим возвращением в исходное состояние.

document.addEventListener('click', (e) => {
    let target = e.target,
        open = target.dataset.open ? target.dataset.open : 0,
        close = target.dataset.close ? target.dataset.close : 0,
        element = open || close ? document.querySelector(`[data-window=${open || close}]`) : 0,
        focused = trapFocus.bind(null, element);

    if (open) {
        element.classList.add(`${element.dataset.window}-open`);
        element.addEventListener('keydown', focused);
    }
    
    if (close) {
        element.classList.remove(`${element.dataset.window}-open`);
        element.removeEventListener('keydown', focused);
    }
});

const trapFocus = (element, event) => {
    let focusableElement = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'),
        firstFocusableElement = focusableElement[0],
        lastFocusableElement = focusableElement[focusableElement.length - 1];

    if (!(event.key === 'Tab' || event.keyCode === 9)) { return; }

    if (event.shiftKey) {
        if (document.activeElement === firstFocusableElement) {
            lastFocusableElement.focus();
            event.preventDefault();
        }
    } else {
        if (document.activeElement === lastFocusableElement) {
            firstFocusableElement.focus();
            event.preventDefault();
        }
    }
};

Answer 1

[Антон Швец]

const focusedCallbacks = new WeakMap();
document.addEventListener('click', (e) => {
    let target = e.target,
        open = target.dataset.open ? target.dataset.open : 0,
        close = target.dataset.close ? target.dataset.close : 0,
        element = open || close ? document.querySelector(`[data-window=${open || close}]`) : 0,
        

    if (open) {
        element.classList.add(`${element.dataset.window}-open`);
        focusedCallback.set(element,trapFocus.bind(null, element));
        element.addEventListener('keydown', focusedCallback.get(element));
    }
    
    if (close) {
        element.classList.remove(`${element.dataset.window}-open`);
        element.removeEventListener('keydown', focusedCallback.get(element));
        focusedCallback.delete(element);
    }
});

Comments

[Никита Токарев]

В названии константы ошибка, а так все супер! Спасибо!

[Антон Швец]

Никита Токарев, на самом деле не очень хороший метод, можно два раза сделать set и ссылка на функцию будет потеряна.
Надо перед навешиванием слушателя всегда удалять предыдущий, если он есть.

Answer 2

[Stalker_RED]

потому что тот focused, который вы передаете при попытке снять listener, это другой экземпляр, отличный от того, который был создан при добавлении.

Comments

[Ярослав Иванов]

Обернуть в (f() {}) () или обычную функцию?

[Stalker_RED]

Ярослав Иванов, чем тут iife поможет? у него focused пересоздается при каждом клике.

[Ярослав Иванов]

Stalker_RED, ну а если обычную в обычную функцию? Пускай внутри функции bind делает две разные ссылки но обёртка то едина.

[Ярослав Иванов]

Stalker_RED, а точно.