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

【问题标题】：See what element has been clicked in javascript?查看在 javascript 中单击了哪些元素？
【发布时间】：2017-10-08 15:54:28
【问题描述】：

好的，所以当您按下一个键时音频开始，现在我想单击一个键/按钮并开始播放音频，我不知道当有人点击时如何获取数据，以便我可以播放它之后。

所以现在我必须查看单击了哪个元素，然后获取该元素的数据并将其与音频文件匹配...然后播放它

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

【问题讨论】：

标签： javascript html css ecmascript-6

【解决方案1】：

为每个按键添加了点击监听，并修改了 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>

【讨论】：