[alifanov]

$(function() {

	function makeSound(e) {
		var code = e.keyCode ? e.keyCode : this.getAttribute("data-key");  
		var activeKey = document.querySelector('.key[data-key="'+code+'"]');
		var activeAudio = document.querySelector('audio[data-key="'+code+'"]');
		if (!activeAudio) return;
		activeAudio.currentTime = 0;
		activeAudio.play();
		activeKey.classList.add('active');
	}

  window.addEventListener('keydown', makeSound); //(1)

  var allKeys = document.querySelectorAll(".key"); 

  allKeys.forEach(function (key) {
  	key.addEventListener('click', makeSound);	
  })

  allKeys.forEach(function (key) { //(2)
  	key.addEventListener('transitionend', function (e) {
  		if(e.propertyName !== 'transform') return;
  		this.classList.remove("active");
  	});
  });
});

Здраствуйте!
Делал пример из курса, там был обработчик(1) на клавиатуру, при нажатии на определенный .key запускал аудио и добавлял класс active, также для каждого элемента key существует обработчик для очистки от класса (2). Скажите как мне реализовать подобное для клика? У меня все работает, да только класс после клика не удаляется. Почему так происходит?