'Why can't I remove the event listeners?
I've reviewed many answers to similar questions, but I don't have a solution.
The if statements below ensure that the listeners are only added once, and as I resize the window I can see the attributes added and removed accordingly. Unfortunately, I'm finding the listeners are not removed. For the throttle, I'm using this function.
Why can't I remove the listeners?
window.addEventListener('load', loadListenersHome);
window.addEventListener('resize', throttle(loadListenersHome(), 1000));
function loadListenersHome() {
var navPanel = document.getElementById('nav');
var trigger = document.getElementById('trigger');
var makeNavPanelOpaque = function() {
if (navPanel.className.indexOf('change') !== -1) {
navPanel.setAttribute('style','background-color: white;');
}
}
var makeNavPanelTransparent = function() {
if (navPanel.className.indexOf('change') !== -1) {
navPanel.setAttribute('style','');
}
}
if (window.matchMedia('(max-width: 567.98px)').matches && window.matchMedia('(max-height: 799.98px)').matches) {
if(trigger.getAttribute('listener-mouseenter') !== 'added') {
trigger.addEventListener('mouseenter', makeNavPanelOpaque, false);
trigger.setAttribute('listener-mouseenter','added');
}
if(trigger.getAttribute('listener-mouseleave') !== 'added') {
trigger.addEventListener('mouseleave', makeNavPanelTransparent, false);
trigger.setAttribute('listener-mouseleave','added');
}
} else {
if(trigger.getAttribute('listener-mouseenter') === 'added') {
trigger.removeEventListener('mouseenter', makeNavPanelOpaque, false);
trigger.removeAttribute('listener-mouseenter');
}
if(trigger.getAttribute('listener-mouseleave') === 'added') {
trigger.removeEventListener('mouseleave', makeNavPanelTransparent, false);
trigger.removeAttribute('listener-mouseleave');
}
}
}
UPDATE 1 (this works, but is not throttled):
window.addEventListener('load', addRemoveListeners);
window.addEventListener('resize', addRemoveListeners);
function addRemoveListeners() {
var trigger = document.getElementById('trigger');
if (window.matchMedia('(max-width: 567.98px)').matches && window.matchMedia('(max-height: 799.98px)').matches) {
if(trigger.getAttribute('listener-mouseenter') !== 'added') {
addListener(trigger, 'mouseenter', makeNavPanelOpaque, false);
trigger.setAttribute('listener-mouseenter','added');
}
if(trigger.getAttribute('listener-mouseleave') !== 'added') {
addListener(trigger, 'mouseleave', makeNavPanelTransparent, false);
trigger.setAttribute('listener-mouseleave','added');
}
} else {
if(trigger.getAttribute('listener-mouseenter') === 'added') {
removeListener(trigger, 'mouseenter', makeNavPanelOpaque, false);
trigger.removeAttribute('listener-mouseenter');
}
if(trigger.getAttribute('listener-mouseleave') === 'added') {
removeListener(trigger, 'mouseleave', makeNavPanelTransparent, false);
trigger.removeAttribute('listener-mouseleave');
}
}
}
function makeNavPanelOpaque() {
var navPanel = document.getElementById('nav');
if (navPanel.className.indexOf('change') !== -1) {
navPanel.setAttribute('style','background-color: rgba(255,255,255,0.96); height: 100%;');
}
}
function makeNavPanelTransparent() {
var navPanel = document.getElementById('nav');
if (navPanel.className.indexOf('change') !== -1) {
navPanel.setAttribute('style','');
}
}
UPDATE 2 (for Peter, listeners are not added on resize with this version):
window.addEventListener('load', addRemoveListeners);
window.addEventListener('resize', throttleAddRemoveListeners);
var throttleAddRemoveListeners = throttle(addRemoveListeners, 1000);
function addRemoveListeners() {
var trigger = document.getElementById('trigger');
if (window.matchMedia('(max-width: 567.98px)').matches && window.matchMedia('(max-height: 799.98px)').matches) {
if(trigger.getAttribute('listener-mouseenter') !== 'added') {
addListener(trigger, 'mouseenter', makeNavPanelOpaque, false);
trigger.setAttribute('listener-mouseenter','added');
}
if(trigger.getAttribute('listener-mouseleave') !== 'added') {
addListener(trigger, 'mouseleave', makeNavPanelTransparent, false);
trigger.setAttribute('listener-mouseleave','added');
}
} else {
if(trigger.getAttribute('listener-mouseenter') === 'added') {
removeListener(trigger, 'mouseenter', makeNavPanelOpaque, false);
trigger.removeAttribute('listener-mouseenter');
}
if(trigger.getAttribute('listener-mouseleave') === 'added') {
removeListener(trigger, 'mouseleave', makeNavPanelTransparent, false);
trigger.removeAttribute('listener-mouseleave');
}
}
}
function makeNavPanelOpaque() {
var navPanel = document.getElementById('nav');
if (navPanel.className.indexOf('change') !== -1) {
navPanel.setAttribute('style','background-color: rgba(255,255,255,0.96); height: 100%;');
}
}
function makeNavPanelTransparent() {
var navPanel = document.getElementById('nav');
if (navPanel.className.indexOf('change') !== -1) {
navPanel.setAttribute('style','');
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
