查看在javascript中单击了哪些元素？

Question

Ok so when you press a key the audio starts, now i want to click a key/button and the audio to start, I don't know how to get the data when somebody click is, so that I can play it after. 好的，所以当您按下一个键时，音频开始播放，现在我想单击一个键/按钮，然后开始播放音频，我不知道当有人单击时如何获取数据，以便以后可以播放。

So now I have to see which element is clicked then take the data of that element and match it with the audio file... and then play it 因此，现在我必须查看单击了哪个元素，然后获取该元素的数据并将其与音频文件进行匹配...然后播放它

 <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>

Answer 1

Added click listener for each keys and modified the playSound function to take in the keyCode directly. 为每个键添加了单击侦听器，并修改了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>

查看在javascript中单击了哪些元素？

问题描述

1 个解决方案

解决方案1
0 2017-10-08 16:16:55

查看在javascript中单击了哪些元素？

问题描述

1 个解决方案

解决方案1 0 2017-10-08 16:16:55

解决方案1
0 2017-10-08 16:16:55