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

Question

we currently have a video player with 3 custom buttons to change speed. The 3 buttons are:

Slower (clicking 1 time will slow down the video 5%, slowest being 80% from 100%).

Normal on click returns the video to 100%.

Faster Same as slower, but goes fast, max is 120%.

The buttons are located slightly down the page, but on click will make the page reset to the top. I have tried both e.preventDefault(); and setting each function to return false; but neither seem to stop the reset? What would be a possible error or solution for this problem?

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

This current code throws an unidentified e error, even though I identify it within the function's params.

I also have tried this solution with 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();
  }

Edit: Here is the HTML for the buttons

<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>

I appreciate all the help on this! Thanks!

@SandeepNayak Updated, they are not in a form, just a container. — knocked loose, Jun 01 '16 at 14:54
supply event args and call a function `preventDefault()` e.g., e.preventDefault() — JF-Mechs, Jun 01 '16 at 14:56
Why not remove the `href`? You can use css to get the pointer you want. — Chris Lear, Jun 01 '16 at 14:57
@ChrisLear this solved it, if you add an answer I will accept it. Thanks! — knocked loose, Jun 01 '16 at 15:01

score 1 · Accepted Answer · answered Jun 01 '16 at 15:10

1

Try removing the href from the <a> tag. That will prevent it from navigating to '#' which is the top of the page.

answered Jun 01 '16 at 15:10

Chris Lear

6,592
1
18
26

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

You're looking for the Event preventDefault() method which will stop the link from redirecting you. See the linked post.

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

edited May 23 '17 at 12:22

Community

1
1

answered Jun 01 '16 at 14:56

CBusBus

2,321
1
18
26

score 0 · Answer 3 · answered Jun 01 '16 at 15:14

i tried it myself because your code looked ok, but who knows. What i did was, i rewrote your code with some of mine and it works. Check the jsFiddle

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

here is the sample code for one link(in 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();
        }

});

and here is sample code for 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. i added a lot of loremIpsum text to make sure it wasnt jumping up, i also added your JS inside my function to make sure it'd wouldnt throw an error and it still works. I also added a random "alert" to make sure it fired and the page wouldnt jump and it also worked.

This said, id just rewrite your links and make em like my example and it should work. I just added it like this because i like to keep all JS off the page.

Good luck.

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

3 Answers3