确定进度条上的鼠标悬停位置？

Question

当鼠标悬停在HTML进度条上时，可以确定鼠标的位置吗？例如，如果我在播放音频文件时使用进度条，则当用户将鼠标移到显示音频文件所在位置的时间戳的进度栏上时，我想要显示一个工具提示。这将是一种预览他们在点击它之前所寻找的轨道的位置的方式。

Answer 1

您可以使用元素上的mouseenter事件。

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

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

的情况下给你一些futher属性，如clientX和clientY。 将这些与进度条的位置和一些减法组合时，您应该能够确定进度条内的鼠标位置。

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/