Javascript 确定进度条上的单击位置？

是否可以使用普通javascript确定用户单击进度条的值/位置

目前，我可以检测到元素上的点击，但只能获取条的当前位置，与用户的点击无关

HTML

---

可以获得元素内部单击位置的坐标，如下所示：

只需从单击页面的坐标中减去元素的偏移位置

若要确定单击事件是否发生在值范围内，则必须将单击的值（相对于元素的宽度）和进度元素上设置的值属性进行比较：

document.getElementById（'progressBar'）.addEventListener（'click'，函数（e）{
var x=e.pageX-this.offsetLeft，//或e.offsetX（尽管支持较少）
y=e.pageY-this.offsetTop，//或e.offsetY
单击EdValue=x*this.max/this.offsetWidth，
isClicked=clickedValue事件实际上采用了一个参数，该参数包含事件信息，包括单击位置信息。您可以使用该参数确定在进度栏中单击发生的位置


document.getElementById（'progressBar'）.addEventListener（'click'，函数（事件）{
document.getElementById（'result'）.innerHTML=（'Current position:'+document.getElementById（'progressBar'）.position+“
”）；
document.getElementById（'result'）.innerHTML+=（'Current value:'+document.getElementById（'progressBar'）.value+“
”）；
document.getElementById（'result'）.innerHTML+=（'Mouse click（绝对）：'+event.offsetX+，“+event.offsetY+”
）；
})；
如果您希望单击通用的
max
值（本例中的值介于0和1之间），您只需要一些简单的数学运算

document.getElementById('progressBar').addEventListener('click', function (e) {

    var value_clicked = e.offsetX * this.max / this.offsetWidth;
    alert(value_clicked);

});

我测试了您的项目，请尝试以下解决方案：


document.getElementById（'progressBar'）.addEventListener（'click'，函数（e）{
var x=e.pageX-this.offsetLeft；
//取消注释以下行以激活警报
//警报（'Current position:'+document.getElementById（'progressBar'）.position）；
//单击前保存位置
var startPos=document.getElementById（'progressBar'）.position；
//将x值转换为进度范围[0 1]
var xconvert=x/300；//因为宽度是300px，需要[0,1]范围内的值
var finalx=（xconvert）.toFixed（1）；//昏迷后四舍五入到一位数
//取消注释以下行以激活警报
//警报（“单击值：”+finalx）；
//如果不想在单击注释后更改进度条值，请单击下一行
document.getElementById（'progressBar'）。value=finalx；
document.getElementById（'result'）.innerHTML=（'Start position:'+startPos+“

”）；
document.getElementById（'result'）.innerHTML+=（'Current position:'+document.getElementById（'progressBar'）.position+“
”）；
document.getElementById（'result'）.innerHTML+=（'Current value:'+document.getElementById（'progressBar'）.value+“

”）；
document.getElementById（'result'）.innerHTML+=（'Real click value:'+xconvert+“
”）；
document.getElementById（'result'）.innerHTML+=（'progressbar中设置的当前值：'+finalx+“
”）；
})；
#进度条{
宽度：300px；
}


$（文档）.ready（函数（）{
$（“.media progress”）。在（“单击”上，功能（e）{
var max=$（this）.width（）；//获取width元素
var pos=e.pageX-$（this）.offset（）.left；//定位光标
var dual=Math.round（pos/max*100）；//round%
如果（双>100）{
var-dual=100；
}
$（此）.val（双）；
$（“#进度值”）。文本（双）；
});
})；
。媒体进程{
/*背景*/
位置：相对位置；
宽度：75%；
显示：内联块；
光标：指针；
高度：14px；
背景：灰色；
边界：无；
垂直对齐：中间对齐；
}
.media progress:：-webkit进度条{
/*Chrome Safari BG*/
背景：灰色；
边界：无
}
.media progress:：-webkit进度值{
/*铬狩猎价值*/
背景#17BAB3；
边界：无
}
.媒体进度：-moz进度条{
/*Firefox值*/
背景#17BAB3；
边界：无
}
.媒体进度：-ms fill{
/*IE-MS值*/
背景#17BAB3；
边界：无
}
得票最多的答案实际上并不是万能的。
这是因为你必须考虑所有的偏心父母留下的所有损失。
这是一个改进的答案。我希望它能有所帮助

__addProgressBarListener () {
      document.getElementById('video-player-progress-bar').addEventListener('click', function (e) {
        let totalOffset = this.offsetLeft
        let parent = this.offsetParent
        const maximumLoop = 10
        let counter = 0
        while (document.body !== parent && counter < maximumLoop) {
          counter += 1
          totalOffset += parent.offsetLeft
          parent = parent.offsetParent
        }
        const x = e.pageX - totalOffset // or e.offsetX (less support, though)
        const clickedValue = x / this.offsetWidth
        console.log('x: ', x)
        console.log('clickedValue: ', clickedValue)
      })
    },

\uu addProgressBarListener（）{
document.getElementById（'video-player-progress-bar'）。addEventListener（'click'，函数（e）{
设totalOffset=this.offsetLeft
让parent=this.offsetParent
常量最大循环=10
设计数器=0
while（document.body！==parent&&counter
对于那些愿意使用滑块而不是进度条的人来说，获取值要容易得多：

HTML

我用纯javascript找到了一个简单的解决方案

使用这些属性可以计算百分比

document.getElementById('progressBar').addEventListener('click', function (e) {
    var bounds = this.getBoundingClientRect();
    var max = bounds.width //Get width element
    var pos = e.pageX - bounds.left; //Position cursor
    var dual = Math.round(pos / max * 100); // Round %

    console.log('percentage:', dual);
});

这将是一个好主意，如果存在任何SCORBAR，那么：<代码> x= E.PaxEx -To.OffStute+Doopt.Boy.ScLeLeLe.Y.E.Pigy–To.OffStopTop+Doop.Stord.ScReltOP； @章鱼……除非我遗漏了什么东西。你是正确的。我的道歉。我在考虑不支持PaXEX的浏览器。你需要什么
document.getElementById('progressBar').addEventListener('click', function (e) {

    var value_clicked = e.offsetX * this.max / this.offsetWidth;
    alert(value_clicked);

});

__addProgressBarListener () {
      document.getElementById('video-player-progress-bar').addEventListener('click', function (e) {
        let totalOffset = this.offsetLeft
        let parent = this.offsetParent
        const maximumLoop = 10
        let counter = 0
        while (document.body !== parent && counter < maximumLoop) {
          counter += 1
          totalOffset += parent.offsetLeft
          parent = parent.offsetParent
        }
        const x = e.pageX - totalOffset // or e.offsetX (less support, though)
        const clickedValue = x / this.offsetWidth
        console.log('x: ', x)
        console.log('clickedValue: ', clickedValue)
      })
    },

<input type="range" min="0" max="100" value="50" id="slider">

const slider = document.getElementById('slider');
slider.onclick = () => alert('Current value: ' + slider.value);

document.getElementById('progressBar').addEventListener('click', function (e) {
    var bounds = this.getBoundingClientRect();
    var max = bounds.width //Get width element
    var pos = e.pageX - bounds.left; //Position cursor
    var dual = Math.round(pos / max * 100); // Round %

    console.log('percentage:', dual);
});