return false stoppt die Seite nicht vom Laden auf den Anker klicken

Question

wir haben derzeit einen Video-Player mit 3 benutzerdefinierten Tasten, um die Geschwindigkeit zu ändern. Die 3 Tasten sind:

Langsamer (Klicken auf 1 Mal verlangsamt das Video 5%, am langsamsten ist 80% von 100%).

Normal Bei Klick kehrt das Video zu 100% zurück.

Schneller Wie langsamer, geht aber schnell, max ist 120%.

Die Schaltflächen befinden sich etwas weiter unten auf der Seite, aber beim Klicken wird die Seite auf den Anfang zurückgesetzt. Ich habe sowohl e.preventDefault(); probiert und jede Funktion auf return false; eingestellt, aber keiner scheint den Reset zu stoppen? Was wäre ein möglicher Fehler oder eine Lösung für dieses 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(); 
    } 

Dieser Strom Code löst ein unidentified e Fehler, auch wenn ich es in der Funktion des params identifizieren.

Ich habe auch diese Lösung mit return false;

versucht

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: Hier ist der HTML-Code für die Schaltflächen

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

ich alle Hilfe zu diesem Thema zu schätzen wissen! Vielen Dank!

Answer 1

Versuchen Sie, die href vom <a>-Tag zu entfernen. Das verhindert, dass es zu "#" navigiert, was der Anfang der Seite ist.

Answer 2

Sie suchen nach der Event preventDefault() Methode, die den Link von der Weiterleitung abhält. Siehe den verlinkten Post.

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

Answer 3

Ich habe es selbst versucht, weil Ihr Code in Ordnung war, aber wer weiß. Was ich getan habe, ich habe Ihren Code mit einigen von mir neu geschrieben und es funktioniert. die jsFiddle überprüfen

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

hier ist der Beispielcode für einen 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(); 
     } 

}); 

und hier ist Beispielcode für 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. ich fügte eine Menge loremIpsum Text hinzu, um sicherzustellen, dass es nicht sprang, ich fügte auch dein JS innerhalb meiner Funktion hinzu, um sicherzustellen, dass es nicht einen Fehler werfen würde und es noch funktioniert. Ich fügte auch eine zufällige "Warnung" hinzu, um sicherzustellen, dass es gefeuert wurde und die Seite nicht springen würde und es auch funktionierte.

Das sagte, ID nur umschreiben Sie Ihre Links und machen sie wie mein Beispiel und es sollte funktionieren. Ich habe es einfach so hinzugefügt, weil ich alle JS von der Seite lassen möchte.

Viel Glück.