Невозможно удалить прослушиватель событий

Итак, у меня есть div с анимацией:

var x = true;

function dynamicTaskbar(thumb) {
		function anim1() {
			thumb.style.backgroundColor = "green";
		}
		function anim2() {
			thumb.style.backgroundColor = "blue";
		}
		if (x === false) {
			thumb.style.backgroundColor = "red";
			thumb.removeEventListener("mouseover", anim1);
			thumb.removeEventListener("mouseleave", anim2);
      x = true;
		} else {
			thumb.style.backgroundColor = "blue";
			thumb.addEventListener("mouseover", anim1);
			thumb.addEventListener("mouseleave", anim2);
      x = false;
		}
	}

	//Create window's thumbnail for taskbar
	var thumbnail = document.createElement("div");
	thumbnail.setAttribute("class", "thumbnail");
	taskbar.append(thumbnail);
	taskbar.style.width = taskbar.style.width + thumbnail.style.width + "px";
	thumbnail.addEventListener("mousedown", function() {
		dynamicTaskbar(thumbnail);
	});

#taskbar {
  background-color: red;
  border: solid 1px black;
  
  width: 50px;
  height: 30px;
}

.thumbnail {
  width: 50px;
  height: 30px;
  border: solid 1px black;
}

<div id = "taskbar"></div>

По умолчанию div красный.

При нажатии:

Если x истинно, оно становится ложным, а div становится синим. Добавляются два слушателя событий, mouseover (div становится зеленым) и mouseleave (div снова становится красным).
Если x ложно, оно становится истинным, а div становится красным. Но вот моя проблема: предполагается, что оба прослушивателя событий (mouseover и mouseleave) будут удалены, но это не работает. Я поискал в Интернете, но ничего не нашел, что решило бы мою проблему.

Любая помощь?

Вы пытались переместить anim1 и anim2 за пределы функции и посмотреть, поможет ли это? Я не уверен, но они могут быть разными объектами при каждом вызове родительской функции.

— 18.11.2018 16:48

javascript addeventlistener

18.11.2018 16:08

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Решением этой проблемы является извлечение функций anim1() и anim2() из функции dynamicTaskbar().

Поскольку обе функции расположены внутри функции dynamicTaskbar(), они создаются снова и снова при каждом выполнении функции, в результате чего экземпляры отличаются от исходных.

Если, например, при первом выполнении (1-й щелчок) dynamicTaskbar() «идентификатор объекта» anim1() будет «1», а при втором выполнении - «2». Поэтому, когда вы пытаетесь удалить слушателя, вы фактически пытаетесь удалить его для другой ссылки на объект.

Взгляните на пример:

var x = true;

function anim1(thumb) {
  thumbnail.style.backgroundColor = "green";
}
function anim2(thumb) {
  thumbnail.style.backgroundColor = "blue";
}
    
function dynamicTaskbar(thumb) {
		if (x === false) {
			thumbnail.style.backgroundColor = "red";
			thumbnail.removeEventListener("mouseover", anim1);
			thumbnail.removeEventListener("mouseleave", anim2);
      x = true;
		} else {
			thumbnail.style.backgroundColor = "blue";
			thumbnail.addEventListener("mouseover", anim1);
			thumbnail.addEventListener("mouseleave", anim2);
      x = false;
		}
	}

	//Create window's thumbnail for taskbar
	var thumbnail = document.createElement("div");
	thumbnail.setAttribute("class", "thumbnail");
	taskbar.append(thumbnail);
	taskbar.style.width = taskbar.style.width + thumbnail.style.width + "px";
	thumbnail.addEventListener("mousedown", function() {
		dynamicTaskbar(thumbnail);
	});

#taskbar {
  background-color: red;
  border: solid 1px black;
  
  width: 50px;
  height: 30px;
}

.thumbnail {
  width: 50px;
  height: 30px;
  border: solid 1px black;
}