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

それを再生を追加しましたが、各キーのリスナーをクリックして変更keyCodeを直接取り込むplaySound関数。

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でどの要素がクリックされたかを確認しますか？

答えて

関連する問題