javascript中的自定义卷滑块

我正在努力改进前一段时间制作的音量滑块代码。我遇到的问题如下

问题

当您第一次单击音量按钮并拖动它时，音量按钮会跳转到起点

由于第一个错误，当拖动鼠标时，鼠标光标不会在音量按钮的中心对齐 这可能是由于

事件.offsetX

造成的

第一次单击音量按钮并将其移动时，

事件.offsetX

将获取单击音量按钮的位置到*音量按钮开始位置的偏移量

为了解决这个问题，我添加了变量

firstClicked

。然而，这并没有解决问题

const volume=document.querySelector（'.volume'）；
const volumeRange=document.querySelector（“.volumeRange”）；
const volumeContainer=document.querySelector（“.volumeContainer”）；
const volumeBtn=document.querySelector（“.volume按钮”）；
const volumeRangeWidth=volumeRange.getBoundingClientRect（）.width；//这将是容量限制（100%）
/*volumeContainer.addEventListener（“单击”，volumeClick）；
函数卷单击（事件）{
设x=数学地板（事件补偿x）；
如果（x<0）x=0；//检查是否过低
如果（x>volumeRangeWidth）x=volumeRangeWidth；//检查是否过高
volume.style.width=（x+10）+“px”；
}
*/
放下鼠标=错误；
window.addEventListener（“mouseup”，向上）；
volumeBtn.addEventListener（“鼠标向下”，向下）；
volumeContainer.addEventListener（“mousemove”，volumeSlide）；
函数down（）{
mouseIsDown=true；
}
函数up（）{
mouseIsDown=false；
firstClick=true；
}
让firstClick=true；//这不管用
函数卷滑动（事件）{
如果（鼠标按下&&！首次单击）{
设x=Math.floor（event.offsetX-event.currentTarget.getBoundingClientRect（）.left）；
如果（x<0）x=0；//检查是否过低
如果（x>volumeRangeWidth）x=volumeRangeWidth；//检查是否过高
volume.style.width=（x+10）+“px”；
}
//“firstClick”忽略第一次单击时的偏移量，因为它给出了音量按钮的偏移量
firstClick=false；
}

正文{
背景色：#2A2A；
}
.容量容器{
填充：40px 0px；
利润率：0px 20px；
背景色：淡蓝色；
}
.音量范围{
高度：5px；
宽度：250px；
背景:#555；
边界半径：15px；
}
.volume范围>.volume{
高度：5px；
宽度：50px；
背景：#2ecc71；
边界：无；
边界半径：10px；
大纲：无；
位置：相对位置；
}
.volume范围>.volume>.volume按钮{
宽度：20px；
高度：20px；
边界半径：20px；
背景：#FFF；
位置：绝对位置；
右：0；
最高：50%；
转化：translateY（-50%）；
光标：指针；
大纲：无；
}

卷

您需要将

mousemove

事件设置为音量按钮容器，而不是其本身，然后添加

指针事件：无到音量按钮，这样它就没有自己单独的鼠标坐标

“……因此它没有自己单独的鼠标坐标。”请您再详细说明一下。我不确定我是否完全理解指针事件：none；正在做什么。