進行状況バーのマウスのホバー位置を決定しますか？

Question

マウスをHTMLプログレスバーの上に置いたときのマウスの位置を特定することはできますか？たとえば、オーディオファイルを再生しているときにプログレスバーを使用している場合、ユーザーがホバーしているオーディオのタイムスタンプを示すプログレスバーの上にマウスを移動すると、ツールヒントが表示されます。これは、クリックする前に探しているトラックの場所をプレビューする方法です。

Answer 1

要素でmouseenterイベントを使用できます。

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

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

イベントは、あなたのclientXとclientYのようないくつかのfuther特性を与えます。 これをプログレスバーの位置といくつかの減算の組み合わせに組み合わせるときは、進行状況バー内のマウスの位置を決定できるはずです。

Answer 2

方向性ありがとうございます。 「mousemove」イベントは、私が探していたイベントです。

私はそのイベントを使用するには、このサイト上で同様の回答からいくつかのコードを変更：

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/