Bestimmen Sie die Hover-Position der Maus auf dem Fortschrittsbalken?

Question

Ist es möglich, die Position der Maus zu bestimmen, wenn sie über einen HTML-Fortschrittsbalken bewegt wird? Wenn ich beispielsweise beim Abspielen einer Audiodatei einen Fortschrittsbalken verwende, möchte ich eine QuickInfo anzeigen lassen, wenn der Benutzer mit der Maus über den Fortschrittsbalken fährt, der den Zeitstempel im Audio zeigt, in dem er sich gerade befindet. Dies wäre eine Möglichkeit, eine Vorschau des Standorts der Spur anzuzeigen, die sie suchen würden, bevor sie darauf geklickt haben.

Answer 1

können Sie das Ereignis mouseenter für das Element verwenden.

document.getElementById("progress").addEventListener("mouseover", function(event) { 
}) 

https://developer.mozilla.org/de/docs/Web/Events/mouseenter

die Veranstaltung gibt Ihnen einige weitere Eigenschaften wie clientX und clientY. Wenn Sie diese mit der Position des Fortschrittsbalkens und einiger Subtraktion kombinieren, sollten Sie in der Lage sein, die Position der Maus innerhalb des Fortschrittsbalkens zu bestimmen.

Answer 2

Danke für die Richtung. Das "mousemove" -Ereignis ist das, was ich gesucht habe.

ich auf dieser Seite einige Code aus einer ähnlichen Antwort geändert, dass die Veranstaltung zu nutzen:

document.getElementById('progressBar').addEventListener('mousemove', function (e) { 
    var x = e.pageX - this.offsetLeft; 

    //Convert x value to progress range [0 1] 
    var xconvert = x/300; //300 is width of the progress bar 
    var finalx = (xconvert).toFixed(2); 

    document.getElementById('result').innerHTML = ('Hover position: ' + finalx + "<br/>"); 
}); 

http://jsfiddle.net/2dqn5brs/