Javascript 获取沿x轴单击的元素宽度百分比

我的页面结构如下图所示。当单击

#progress

元素中的任意位置时，我想计算单击的全宽百分比

如何做到这一点

< div id="progress" onMouseUp={ e => this._seekTo(e) }></div>

---

您可以获得元素宽度沿x轴的百分比单击位置，如：

document.getElementById（'progress'）.addEventListener（'click'，函数（e）{
var bcr=this.getBoundingClientRect（）；
log（'您点击'，（e.clientX-bcr.left）/bcr.width）；
});

使用

e.clientX

和

element.offsetLeft

计算时的问题是，它们代表两种不同的东西

元素。offsetLeft

是一个整数，表示从相对位置最近的父元素向左偏移的像素数。

e.clientX

提供发生事件的应用程序客户端区域内的水平坐标（与页面内的坐标相反）

例如，如果用户垂直滚动，就会出现问题。您可以使用

e.pageX

，然后两者都基于DOM，但仍然需要将

元素的父元素的所有
偏移量
相加，以便两个位置都相对于整个文档的左边缘

进度条示例：


功能鼠标滑动位置（元素e）{
var bcr=element.getBoundingClientRect（）；
返回{
x:Math.min（Math.max（0，（e.clientX-bcr.left）/bcr.width），1），
y:Math.min（Math.max（0，（e.clientY-bcr.top）/bcr.height），1）
}
};
功能激活滑块（e）{
如果（e.touchs&&e.touchs.length>1）{
回来
}
e、 预防默认值（）；
window.activeSlider=this；
无柄滑道运动（e）；
}
函数handleSliderMove（e）{
如果（e.touchs&&e.touchs.length>1）{
回来
}
if（window.activeSlider）{
var progressBar=window.activeSlider.getElementsByClassName（'progress-bar'）[0]；
var progressFill=window.activeSlider.getElementsByClassName（'progress-fill'）[0]；
var值=鼠标滑动位置（progressBar，e.touchs&&e.touchs[0]| | e）.x；
progressFill.style.transform='scaleX（'+value+'）；
}
}
功能停用滑翔机（e）{
如果（e.touchs&&e.touchs.length>0）{
回来
}
this.activeSlider=null；
}
document.querySelector（“.progress slider”）.addEventListener（'mousedown'，activateSlider）
document.querySelector（“.progress slider”）.addEventListener（'touchstart'，activateSlider）
window.addEventListener（'mousemove'，handleSliderMove）；
window.addEventListener（'mouseup'，deactivateSlider）；
window.addEventListener（'touchmove'，handleSliderMove）；
window.addEventListener（'touchend'，deactivateSlider）；
window.activeSlider=null
。进度滑块{
填充：10px；
光标：指针；
}
.进度条{
高度：2倍；
背景：rgba（100100,0.5）；
}
.进度滑块：悬停.进度条{
高度：3倍；
}
.进度填写{
身高：100%；
背景：rgba（255,0,0,0.7）；
变换原点：0.50%；
变换：scaleX（0）；
}
您可以获得元素宽度沿x轴的百分比单击位置，如：

document.getElementById（'progress'）.addEventListener（'click'，函数（e）{
var bcr=this.getBoundingClientRect（）；
log（'您点击'，（e.clientX-bcr.left）/bcr.width）；
});

使用
e.clientX
和
element.offsetLeft
计算时的问题是，它们代表两种不同的东西

元素。offsetLeft
是一个整数，表示从相对位置最近的父元素向左偏移的像素数。

e.clientX
提供发生事件的应用程序客户端区域内的水平坐标（与页面内的坐标相反）

例如，如果用户垂直滚动，就会出现问题。您可以使用
e.pageX
，然后两者都基于DOM，但仍然需要将
元素的父元素的所有
偏移量
相加，以便两个位置都相对于整个文档的左边缘

进度条示例：


功能鼠标滑动位置（元素e）{
var bcr=element.getBoundingClientRect（）；
返回{
x:Math.min（Math.max（0，（e.clientX-bcr.left）/bcr.width），1），
y:Math.min（Math.max（0，（e.clientY-bcr.top）/bcr.height），1）
}
};
功能激活滑块（e）{
如果（e.touchs&&e.touchs.length>1）{
回来
}
e、 预防默认值（）；
window.activeSlider=this；
无柄滑道运动（e）；
}
函数handleSliderMove（e）{
如果（e.touchs&&e.touchs.length>1）{
回来
}
if（window.activeSlider）{
var progressBar=window.activeSlider.getElementsByClassName（'progress-bar'）[0]；
var progressFill=window.activeSlider.getElementsByClassName（'progress-fill'）[0]；
var值=鼠标滑动位置（progressBar，e.touchs&&e.touchs[0]| | e）.x；
progressFill.style.transform='scaleX（'+value+'）；
}
}
功能停用滑翔机（e）{
如果（e.touchs&&e.touchs.length>0）{
回来
}
this.activeSlider=null；
}
document.querySelector（“.progress slider”）.addEventListener（'mousedown'，activateSlider）
document.querySelector（“.progress slider”）.addEventListener（'touchstart'，activateSlider）
window.addEventListener（'mousemove'，handleSliderMove）；
window.addEventListener（'mouseup'，deactivateSlider）；
window.addEventListener（'touchmove'，handleSliderMove）；
window.addEventListener（'touchend'，deactivateSlider）；
window.activeSlider=null
。进度滑块{
填充：10px；
光标：指针；
}
.进度条{
高度：2倍；
_seekTo(event) {
    var progress = document.getElementById('progress');
    console.log((event.clientX - progress.offsetLeft) / progress.offsetWidth * 100)
}