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

【问题标题】：return false doesn't stop page from reloading on anchor clickreturn false 不会阻止页面在锚点单击时重新加载
【发布时间】：2016-06-01 14:36:48
【问题描述】：

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

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

正常点击可将视频恢复到 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>

感谢您对此提供的所有帮助！谢谢！

【问题讨论】：

你能显示 HTML 吗？这些按钮在任何表单内吗？
@SandeepNayak 更新了，它们不是形式，只是一个容器。
提供事件参数并调用函数preventDefault() 例如，e.preventDefault()
为什么不删除href？你可以使用css来获取你想要的指针。
@ChrisLear 这解决了它，如果你添加一个答案，我会接受它。谢谢！

标签： javascript jquery html preventdefault

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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 只是重写您的链接并让 em 像我的示例一样，它应该可以工作。我只是这样添加它，因为我喜欢让所有 JS 离开页面。

祝你好运。

【讨论】：