查看在javascript中單擊了哪個元素？

好吧，當你按下一個鍵音頻開始，現在我想點擊一個鍵/按鈕和音頻開始，我不知道如何獲得數據，當有人點擊是，以便我可以播放它後。查看在javascript中單擊了哪個元素？

所以現在我要看看點擊哪個元素再取該元素的數據和音頻文件匹配它...然後發揮它

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

     <audio data-key="65" src="sounds/clap.wav"></audio> 
     <audio data-key="83" src="sounds/hihat.wav"></audio> 
     <audio data-key="68" src="sounds/kick.wav"></audio> 
     <audio data-key="70" src="sounds/openhat.wav"></audio> 
     <audio data-key="71" src="sounds/boom.wav"></audio> 
     <audio data-key="72" src="sounds/ride.wav"></audio> 
     <audio data-key="74" src="sounds/snare.wav"></audio> 
     <audio data-key="75" src="sounds/tom.wav"></audio> 
     <audio data-key="76" src="sounds/tink.wav"></audio> 

    <script> 
     window.addEventListener('keydown' , playSound); 

     function playSound(e) { 
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 
     const key = document.querySelector(`div[data-key="${e.keyCode}"]`); 
     if (!audio) return; 

     key.classList.add('playing'); 
     audio.currentTime = 0; 
     audio.play(); 
     } 

     const keys = Array.from(document.querySelectorAll('.key')); 

     keys.forEach(key => key.addEventListener('transitionend', removeTransition)); 

     function removeTransition(e) { 
     if (e.propertyName !== 'transform') return; 
     e.target.classList.remove('playing'); 
     } 
    </script>

來源

2017-10-08 Vlasie Dragos

添加點擊監聽器爲每個鍵和修改playSound函數直接獲取keyCode。

window.addEventListener('keydown', e => { 
 
    playSound(e.keyCode); 
 
}); 
 

 
function playSound(keyCode) { 
 
    const audio = document.querySelector(`audio[data-key="${keyCode}"]`); 
 
    const key = document.querySelector(`div[data-key="${keyCode}"]`); 
 
    if (!audio) return; 
 

 
    key.classList.add('playing'); 
 
    audio.currentTime = 0; 
 
    audio.play(); 
 
} 
 

 
const keys = Array.from(document.querySelectorAll('.key')); 
 

 
keys.forEach(key => key.addEventListener('transitionend', removeTransition)); 
 
keys.forEach(key => key.addEventListener('click', (e) => { 
 
    playSound(e.srcElement.parentElement.getAttribute('data-key')) 
 
})); 
 

 
function removeTransition(e) { 
 
    if (e.propertyName !== 'transform') return; 
 
    e.target.classList.remove('playing'); 
 
}

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

 
<audio data-key="65" src="sounds/clap.wav"></audio> 
 
<audio data-key="83" src="sounds/hihat.wav"></audio> 
 
<audio data-key="68" src="sounds/kick.wav"></audio> 
 
<audio data-key="70" src="sounds/openhat.wav"></audio> 
 
<audio data-key="71" src="sounds/boom.wav"></audio> 
 
<audio data-key="72" src="sounds/ride.wav"></audio> 
 
<audio data-key="74" src="sounds/snare.wav"></audio> 
 
<audio data-key="75" src="sounds/tom.wav"></audio> 
 
<audio data-key="76" src="sounds/tink.wav"></audio>

來源

2017-10-08 16:16:55 davidchoo12

查看在javascript中單擊了哪個元素？

回答

相關問題