Как правильно организовать обработчик на клик и 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). Скажите как мне реализовать подобное для клика? У меня все работает, да только класс после клика не удаляется. Почему так происходит? |
alifanov,
Покажите, пожалуйста, еще и HTML и CSS |
Не дождался 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>
|
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 |
<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> |
И добавляется, и удаляется...
<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, время: 04:59. |