javascript - 点击链接时播放声音然后重定向

Question

我有以下 JS:

var links = document.getElementsByClassName('swoosh'),
        audio = document.getElementById('a-on-click'),
    clickHandler = function () {
        audio.play();
    }
;

for (var i in links) {
    links[i].addEventListener('click', clickHandler);
}

对于以下 HTML:

<a href="#" class="swoosh">Link 1</a>
<a href="#">Link 2</a>
<a href="#" class="swoosh">Link 3</a>

<audio id="a-on-click">
          <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>

该脚本的工作方式就像一个魅力，仅当 a 具有 class="swoosh" 时才激活声音。但是，当 href 中的链接是实际链接而不是 # 时，就会出现问题。

我对 SO 和 Google 做了一些研究。我认为 preventDefault() 将是这里的解决方案，但是我开始怀疑这一点，因为我想要的是播放声音文件，然后然后重定向到href 中指定的位置，而不是完全停止链接功能。该解决方案还应仅适用于具有“swoosh”类的链接。

如何实现这一目标？

你可以找一个 JSFiddle 来玩 here .

Answer 1

拉胡尔明白了；然后，等待音频结束，然后导航。

var links = document.getElementsByClassName('swoosh'),
  audio = document.getElementById('a-on-click'),
  clickHandler = function(event) {
    event.preventDefault();
    audio.addEventListener('ended', function(){
          window.location.href = event.target.href;
    })
    audio.play();
  };

for (var i in links) {
  links[i].addEventListener('click', clickHandler);
}

<a href="https://www.google.com/" class="swoosh">Link 1</a>
<a href="#">Link 2</a>
<a href="#" class="swoosh">Link 3</a>

<audio id="a-on-click">
          <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>