Question

我们目前有一个带有3个自定义按钮的视频播放器可以改变速度。 3个按钮是：

较慢（点击1次会使视频速度减慢5％，最慢速度从100％减慢80％）。

点击

正常会将视频恢复为100％。

更快与慢速相同，但速度更快，最大值为120％。

按钮位于页面稍下方，但点击后会将页面重置为顶部。我已经尝试过两个this并将每个函数设置为e.preventDefault();但似乎都没有停止重置？这个问题的可能错误或解决方案是什么？

return false;

这个当前代码抛出function speedIncrease(e) { e.preventDefault(); if (currentSpeed < 1.50) { currentSpeed = currentSpeed + 0.05; hapyak.playlist.get()._player.playbackRate(currentSpeed); updateSpeed(); } } function speedDecrease(e) { e.preventDefault(); if (currentSpeed > .8) { currentSpeed = currentSpeed - 0.05; hapyak.playlist.get()._player.playbackRate(currentSpeed); updateSpeed(); } } function resetSpeed(e) { e.preventDefault(); currentSpeed = 1; hapyak.playlist.get()._player.playbackRate(currentSpeed); updateSpeed(); }错误，即使我在函数的参数中识别它。

我也尝试过unidentified e

这个解决方案

return false;

编辑：这是按钮的HTML

function speedIncrease() {
    if (currentSpeed < 1.50) {
      currentSpeed = currentSpeed + 0.05;
      hapyak.playlist.get()._player.playbackRate(currentSpeed);
      updateSpeed();
    }
    return false;
  }

  function speedDecrease() {
    if (currentSpeed > .8) {
      currentSpeed = currentSpeed - 0.05;
      hapyak.playlist.get()._player.playbackRate(currentSpeed);
      updateSpeed();
    }
    return false;
  }

  function resetSpeed() {
    currentSpeed = 1;
    hapyak.playlist.get()._player.playbackRate(currentSpeed);
    updateSpeed();
  }

我感谢所有的帮助！谢谢！

Answer 1

尝试从href标记中删除<a>。这将阻止它导航到＃＆＃39;＃这是页面的顶部。

Answer 2

您正在寻找可以阻止链接重定向的事件preventDefault()方法。请参阅链接的帖子。

https://stackoverflow.com/a/11240923/871580

Answer 3

我自己尝试了，因为你的代码看起来不错，但谁知道呢。我做的是，我用我的一些代码重写了你的代码并且它有效。检查jsFiddle

https://jsfiddle.net/somdow/16h8go17/

这是一个链接的示例代码（在JS中）

$('#link1').on("click", function(evt){
        evt.preventDefault();
        alert("lopan");     

        if (currentSpeed < 1.50) {
        currentSpeed = currentSpeed + 0.05;
        hapyak.playlist.get()._player.playbackRate(currentSpeed);
        updateSpeed();
        }

});

这是HTML的示例代码：

<div class="linkW">
  <div id="link1"><a href="#">Play slower</a></div>
  <div id="link2"><a href="#">Normal speed</a></div>
  <div id="link3"><a href="#">Play faster</a></div>
</div>

PS。我添加了很多loremIpsum文本，以确保它没有跳起来，我还在我的函数中添加了你的JS，以确保它不会抛出错误，它仍然有效。我还添加了一个随机的“警报”，以确保它被解雇，页面不会跳转，它也有效。

这就是说，id只是重写你的链接并使它们像我的例子一样它应该可以工作。我刚才这样添加它是因为我喜欢把所有JS都放在页面上。

祝你好运。

return false不会在锚定点击时停止重新加载页面

3 个答案: