Удалить EventListener в JavaScript после того, как произошло событие?

Есть 24 div-объекта, ожидающих/прослушивающих щелчок мыши. После нажатия на один div-объект я хочу удалить EventListener из всех 24 div-объектов.

for (var i=1;i<=24;i++){
    document.getElementById('div'+i).addEventListener('click',function(event){
        for (var z=1;z<=24;z++){
            document.getElementById('div'+z).removeEventListener()//Problem lies here
        }

        //Some other code to be run after mouseclick

        },false);

}

Проблема в том, что removeEventListener вложен в addEventListener, и мне нужно определить тип, прослушиватель, заголовок как атрибуты метода removeEventListener. И я думаю, что невозможно определить слушателя из-за вложенности.

Я также пытался определить имя функции, но это не сработало:

for (var i=1;i<=24;i++){
    document.getElementById('div'+i).addEventListener('click',function helpme(event){
        for (var z=1;z<=24;z++){
            document.getElementById('div'+z).removeEventListener('click',helpme,false);
        }

        //Some other code to be run after mouseclick

        },false);

}

javascript javascript-events
person einstein    schedule 16.09.2010    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Он должен работать с именованной функцией. Если ваш второй подход не работает должным образом, попробуйте сохранить исходный прослушиватель в переменной, например:

var handler = function(event) {
    for(...) {
        removeEventListener('click', handler, false);
    }
};

addEventListener('click', handler, false);

Пс. если вы заботитесь о скорости, вы можете рассмотреть возможность использования только одного обработчика событий. Вы можете поместить обработчик в родительский элемент div, а затем оттуда делегировать событие. С 24 обработчиками ваш текущий подход, вероятно, не будет сильно влиять на производительность, но об этом следует помнить, если он когда-нибудь покажется медленным.

person Jani Hartikainen    schedule 16.09.2010
comment
Привет Джани! Это сработало! Я хочу поблагодарить вас так много! Я пытался выяснить весь день без какого-либо успеха - person einstein; 16.09.2010
comment
Тема старая, но у меня почему-то не работала. Альтернатива, которая сработала для меня (чтобы остановить прослушиватель событий), заключалась в том, чтобы установить прослушиватель событий на пустую функцию. - person MikeM; 16.01.2016
comment
Привет, Яни, как ты можешь вызывать обработчик в removeEventListener при определении обработчика? Мне это кажется круговым, но я явно что-то недопонимаю! - person codingbryan; 21.04.2020