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

Question

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

更慢（点击 1 次会使视频减慢 5%，最慢的是从 100% 减慢 80%）。

正常点击 returns 视频到 100%。

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

这些按钮位于页面的下方，但单击会使页面重置到顶部。我已经尝试了 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;

尝试过这个解决方案

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();
  }

编辑：这是按钮的 HTML

<div class="video-speed-buttons-container">
  <a href="#" onclick="speedDecrease()">
      <div class="video-speed-button first">Play slower</div>
  </a>
  <a href="#" onclick="resetSpeed()">
      <div class="video-speed-button">Normal speed</div>
  </a>
  <a href="#" onclick="speedIncrease()">
       <div class="video-speed-button">Play faster</div>
  </a>
</div>

感谢所有帮助！谢谢！

Answer 1

您正在寻找事件 preventDefault() 方法，它将阻止 link 对您进行重定向。请参阅 linked post。

Answer 2

尝试从 <a> 标签中删除 href。这将阻止它导航到页面顶部的“#”。

Answer 3

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

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

这里是一个示例代码 link（在 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 以确保它不会抛出错误并且它仍然有效。我还添加了一个随机 "alert" 以确保它被触发并且页面不会跳转并且它也有效。

这就是说，id 只需重写您的 links 并使它们像我的示例一样，它应该可以工作。我只是这样添加它，因为我喜欢让所有 JS 离开页面。

祝你好运。

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

return false doesn't stop page from reloading on anchor click

javascript

jquery

html

preventdefault