Remove event listener not working with Javascript

Question

I try to remove an event listener with Javascript, but it seems not working.

I need to pass the object event in the handler so this is why I'm using .bind().

My code :

if (sidebar) {
  listItems.forEach(function(listItem) {
    listItem.showSubmenu = showSubmenu;
    listItem.addEventListener('click', listItem.showSubmenu.bind(this, subLists), true);
  });

  if (sidebarButton) {
    sidebarButton.addEventListener('click', onClickOnButton.bind(this, sidebar));
  }
}

if (sidebar.getAttribute('data-reduce') === 'true') {
  listItems.forEach(function(listItem) {
    listItem.removeEventListener('click', listItem.showSubmenu, true);
  });
}

function showSubmenu(subLists, e) {
  var target = e.currentTarget,
      subList = target.querySelector('.sidebar__sublist');

  if (subList) {

    if (subList.style.display !== 'block') {

      [...subLists].forEach(hideSubList);

      $(subList).slideDown('slow', function() {
        subList.style.display = 'block';
        target.querySelector('.sidebar__list__item__link__arrow').textContent = 'keyboard_arrow_up';
      });

    } else {
      $(subList).slideUp('slow', function() {
        subList.style.display = 'none';
        target.querySelector('.sidebar__list__item__link__arrow').textContent = 'keyboard_arrow_down';
      });
    }
  }
}

Result : The event is not removed.

listItem.showSubmenu is not the same as listItem.showSubmenu.bind(this, subLists). When you bind a new object is created to handle. — GACy20
– GACy20, Commented Dec 4, 2020 at 13:49
Needing to remove an event listener is a code smell in my book — mplungjan
– mplungjan, Commented Dec 4, 2020 at 13:51
@GACy20 Yes but I need to passe the object event, so is there any other solution ? — tonymx227
– tonymx227, Commented Dec 4, 2020 at 13:57
@tonymx227 you already have jQuery. why not use .on() and .off() ? — Pirate
– Pirate, Commented Dec 4, 2020 at 14:07
I'm in process to remove my jQuery library, in the next few months I want to use native javascript. — tonymx227
– tonymx227, Commented Dec 4, 2020 at 14:08

Bahaa · Accepted Answer · 2020-12-04 14:01:32Z

1

as @GACy20 said listItem.showSubmenu is not the same as listItem.showSubmenu.bind(this, subLists)

try doing it like this

listItem.showSubmenu = showSubmenu.bind(this, subLists);
listItem.addEventListener('click', listItem.showSubmenu, true);

answered Dec 4, 2020 at 14:01

Bahaa

1063 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove event listener not working with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related