Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как правильно организовать обработчик на клик и keydown? (https://javascript.ru/forum/dom-window/70054-kak-pravilno-organizovat-obrabotchik-na-klik-i-keydown.html)

alifanov 07.08.2017 11:19
Как правильно организовать обработчик на клик и keydown?
 
$(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). Скажите как мне реализовать подобное для клика? У меня все работает, да только класс после клика не удаляется. Почему так происходит?

Dilettante_Pro 07.08.2017 14:02
alifanov,
Покажите, пожалуйста, еще и HTML и CSS

Dilettante_Pro 07.08.2017 18:13
Не дождался HTML и CSS от автора, пришлось сделать свой простенький макетик - без аудио.
Однако, все работает - и по цифровым клавишам, и по клику по кнопкам
<style>
.active {
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
	transition: all 1s linear;
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
}
</style>
<button class="key" data-key="48">0</button>
<button class="key" data-key="49">1</button>
<button class="key" data-key="50">2</button>
<script>
	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");
  	});
  });
</script>

alifanov 08.08.2017 11:07 
body
		background-image: url(/img/drum.jpg) 
		background-size: cover
		background-repeat: no-repeat

.main-background
	height: 100vh 
	position: relative

.key-box
	height: 60px
	position: absolute
	top: 50%
	width: 100%
	text-align: center
	margin-top: -30px
	.key
		width: 75px
		height: 60px
		display: inline-block
		margin-left: 20px
		border: 2px solid rgba(#000, .8) 
		border-radius: 3px
		box-shadow: 1px 1px 1px rgba(0,0,0,0.5)
		background-color: rgba(#0E202C, .5)
		cursor: pointer
		transition: all .25s ease
		&:hover 
			box-shadow: 2px 2px 4px rgba(0,0,0,0.8)
			background-color: rgba(#0E202C, .2)
		&.active, &:hover
			border-color: #ffc668 
			transform: scale(1.2)
			box-shadow: 0 0 8px #ffc668 

		kbd
			padding-top: 12px
			line-height: 18px
			font-size: 18px
			color: #fff
			display: block
			margin: 0 auto
			text-align: center
		span 
			margin: 0 auto
			color: #F9BB3B
		&:first-child
			margin-left: 0 

.section-overlay::before 
	content: ""
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: 100%
	background-color: #0E202C
	opacity: .4

alifanov 08.08.2017 11:12 
<body>

	<div class="container">
		<div class="row">
			<div class="col-sm-12">

				<div class="main-background section-overlay">
					<div class="key-box">
						<div data-key="65" class="key">
							<kbd>A</kbd><span>clap</span>
						</div>
						<div data-key="83" class="key">
							<kbd>S</kbd><span>hihat</span>
						</div>
						<div data-key="68" class="key">
							<kbd>D</kbd><span>kick</span>
						</div>
						<div data-key="70" class="key">
							<kbd>F</kbd><span>openhat</span>
						</div>
						<div data-key="71" class="key">
							<kbd>G</kbd><span>boom</span>
						</div>
						<div data-key="72" class="key">
							<kbd>H</kbd><span>ride</span>
						</div>
						<div data-key="74" class="key">
							<kbd>J</kbd><span>snare</span>
						</div>
						<div data-key="75" class="key">
							<kbd>K</kbd><span>tom</span>	
						</div>
						<div data-key="76" class="key">
							<kbd>L</kbd><span>tink</span>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>

	<audio data-key = "65" src="sounds/Kit 18 - Acoustic/CYCdh_K6-ClHat.wav"></audio>
	<audio data-key = "83" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Kick01.wav"></audio>
	<audio data-key = "68" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat01.wav"></audio>
	<audio data-key = "70" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat02.wav"></audio>
	<audio data-key = "71" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr01.wav"></audio>
	<audio data-key = "72" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr02.wav"></audio>
	<audio data-key = "74" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr03.wav"></audio>
	<audio data-key = "75" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr04.wav"></audio>
	<audio data-key = "76" src="sounds/Kit 18 - Acoustic/CYCdh_K6-SnrBuzz.wav"></audio>

</div>	
<link rel="stylesheet" href="css/main.min.css">
<script src="js/scripts.min.js"></script>

</body>

Dilettante_Pro 08.08.2017 12:06
И добавляется, и удаляется...
<style>
body {
		background-image: url(https://javascript.ru/forum/images/ca_serenity/misc/logo.gif); 
		background-size: cover;
		background-repeat: no-repeat;
}
.main-background {
	height: 100vh; 
	position: relative;
}
.key-box {
	height: 60px;
	position: absolute;
	top: 50%;
	width: 100%;
	text-align: center;
	margin-top: -30px;
}
.key {
		width: 75px;
		height: 60px;
		display: inline-block;
		margin-left: 20px;
		border: 2px solid rgba(#000, .8); 
		border-radius: 3px;
		box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
		background-color: rgba(#0E202C, .5);
		cursor: pointer;
}

.active {
			border-color: #ffc668;
	               -ms-transform:scale(1.2));
	               -webkit-transform: scale(1.2);
	                -o-transform: scale(1.2);
                	-moz-transform: scale(1.2);
			transform: scale(1.2);
		transition: all .25s ease;
	        -webkit-transition: all .25s ease;
	        -o-transition: all .25s ease;
	        -moz-transition: all .25s ease;
			box-shadow: 0 0 8px #ffc668; 
}
		kbd {
			padding-top: 12px
			line-height: 18px
			font-size: 18px
			color: #fff
			display: block
			margin: 0 auto
			text-align: center
}
		span {
			margin: 0 auto
			color: #F9BB3B
}
		&:first-child {
			margin-left: 0 
}

.section-overlay::before {
	content: ""
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: 100%
	background-color: #0E202C
	opacity: .4
}
</style>
<body>

	<div class="container">
		<div class="row">
			<div class="col-sm-12">

				<div class="main-background section-overlay">
					<div class="key-box">
						<div data-key="65" class="key">
							<kbd>A</kbd><span>clap</span>
						</div>
						<div data-key="83" class="key">
							<kbd>S</kbd><span>hihat</span>
						</div>
						<div data-key="68" class="key">
							<kbd>D</kbd><span>kick</span>
						</div>
						<div data-key="70" class="key">
							<kbd>F</kbd><span>openhat</span>
						</div>
						<div data-key="71" class="key">
							<kbd>G</kbd><span>boom</span>
						</div>
						<div data-key="72" class="key">
							<kbd>H</kbd><span>ride</span>
						</div>
						<div data-key="74" class="key">
							<kbd>J</kbd><span>snare</span>
						</div>
						<div data-key="75" class="key">
							<kbd>K</kbd><span>tom</span>	
						</div>
						<div data-key="76" class="key">
							<kbd>L</kbd><span>tink</span>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>

	<audio data-key = "65" src="sounds/Kit 18 - Acoustic/CYCdh_K6-ClHat.wav"></audio>
	<audio data-key = "83" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Kick01.wav"></audio>
	<audio data-key = "68" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat01.wav"></audio>
	<audio data-key = "70" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat02.wav"></audio>
	<audio data-key = "71" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr01.wav"></audio>
	<audio data-key = "72" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr02.wav"></audio>
	<audio data-key = "74" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr03.wav"></audio>
	<audio data-key = "75" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr04.wav"></audio>
	<audio data-key = "76" src="sounds/Kit 18 - Acoustic/CYCdh_K6-SnrBuzz.wav"></audio>

</div>	

<script>
	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");
  	});
  });
</script>

</body>


Часовой пояс GMT +3, время: 22:34.