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，而不是完全停止链接功能。该解决方案也应仅适用于具有＆＃34; swoosh＆＃34;类。

这是如何实现的？

你可以找到一个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>

Answer 2

要防止立即点击效果，请在收听者中使用其中一个。

event.preventDefault（）|| event.stopPropagation（）;

完成播放声音后，添加一个事件监听器，以便在声音结束时更改当前窗口的位置。

window.location = event.target.href;

var links = document.getElementsByClassName('swoosh'),
  audio = document.getElementById('a-on-click'),
  clickHandler = function(event) {
    event.preventDefault();
    event.stopPropagation();
    audio.play();
    audio.addEventListener('ended', function(){
       window.location = event.target.href;
    })
  };

for (var i=0; i < links.length; i++) {
  links[i].addEventListener('click', clickHandler, true, true);
}

<a href="https://www.google.com/" class="swoosh">Link 1</a>
<a href="#">Link 2</a>
<a href="https://www.facebook.com/" class="swoosh">Link 3</a>

<audio id="a-on-click">
          <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>

Answer 3

在event.preventDefault()中使用clickHandler，它会阻止该特定类的链接的默认行为：

var links = document.getElementsByClassName('swoosh'),

  audio = document.getElementById('a-on-click'),

  clickHandler = function(event) {
    event.preventDefault();

    audio.addEventListener('ended', function() {
      window.location = event.target.href;
    });

    audio.play();
  };

for (var i in links) {
  typeof i === 'Number' && links[i].addEventListener('click', clickHandler);
}

<a href="https://www.google.com/" class="swoosh">Link 1</a>
<a href="#">Link 2</a>
<a href="https://www.facebook.com/" class="swoosh">Link 3</a>

<audio id="a-on-click">
          <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>

文档：Event.preventDefault() - Web APIs | MDN

编辑1：请使用Ben的答案中的audio.addEventListener。他得到了它。

修改2：更改了for中的代码，以检查i是否为数字类型

编辑3：您的href不正确。使用以下一个：

  clickHandler = function(event) {
    var href = this.href; // cache href here

    event.preventDefault();
    event.stopPropagation();

    audio.play();

    audio.addEventListener('ended', function(){
       window.location = href; // use cached href here
    })
  };

在链接上播放声音单击然后重定向

3 个答案: