Javascript 构建自定义音量滑块

我已经发现并试图修复它，因为它背后的逻辑与我试图实现的相似。我已经设法使它以最少的编辑工作。但它并没有像预期的那样工作

注意：我已经注释掉了点击功能，因为它工作正常

发生了什么事

如果在向左或向右滑动时单击volumeBtn并意外地将光标移出volumeRange div的高度或宽度，则停止单击鼠标时不会执行mouseup事件侦听器

与1类似，单击volumeBtn后，一旦volumeBtn超出“volumeRange”div，就不能将其向左或向右拖动

从第0个位置到所需位置闪烁

我想发生什么

如果单击volumeBtn，然后停止单击鼠标，则即使光标不再位于volumeRange上，也应执行mouseup事件

如果单击volumeBtn，即使光标不再位于volumeBtn页面上，也应该能够向左或向右拖动volumeBtn

const volume=document.querySelector'.volume'； const volumeRange=document.querySelector'.volumeRange'； const volumeBtn=document.querySelector'.volumebton'； //volumeRange.AddEventListener单击，volumeClick； //函数卷ICKEVENT{ //设x=event.offsetX； //volume.style.width=Math.floorx+10+‘px’； // } 放下鼠标=错误； volumeBtn.addEventListenermouseup，向上； volumeBtn.addEventListenermousedown，down； volumeRange.addEventListenermousemove，volumeSlide； 函数down{mouseIsDown=true；} 函数up{mouseIsDown=false；} 函数卷滑动事件{ 如果鼠标落下{ 设x=event.offsetX； console.logx； volume.style.width=Math.floorx+10+‘px’； } } 身体{ 背景色：2A2A； } .音量范围{ 边缘顶部：80px； 高度：5px； 宽度：250px； 背景：555人； 边界半径：15px； } .volume范围>.volume{ 高度：5px； 宽度：50px； 背景：2ecc71； 边界：无； 边界半径：10px； 大纲：无； 位置：相对位置； } .volume范围>.volume>.volume按钮{ 宽度：20px； 高度：20px； 边界半径：20px； 背景：FFF； 位置：绝对位置； 右：0； 最高：50%； 转化：translateY-50%； 光标：指针； 大纲：无； } 音量为什么不起作用

这是按照您描述的方式工作的，因为只有当鼠标位于已附加侦听器的元素内时，才会触发鼠标事件

一个即时但不是很好的解决方案是将mouseup和mousemove的侦听器从volumeBtn/volumerage移动到窗口对象。这不是很好，因为如果以后需要删除此元素，还应该从窗口对象中删除侦听器

更好的解决方案

最好将滑块封装在另一个元素中，这样可以给它一些填充，然后将事件侦听器放在该容器元素上。当您离开元素时，它仍然会停止移动，但至少所有内容都是自包含的

以下代码段显示了这一点：

const volume=document.querySelector'.volume'； const volumeRange=document.querySelector'.volumeRange'； const volumeContainer=document.querySelector'.volumeContainer'； const volumeBtn=document.querySelector'.volumebton'； //volumeRange.AddEventListener单击，volumeClick； //函数卷ICKEVENT{ //设x=event.offsetX； //volume.style.width=Math.floorx+10+‘px’； // } 放下鼠标=错误； volumeContainer.addEventListenermouseup，向上； volumeBtn.addEventListenermousedown，down； volumeContainer.addEventListenermousemove，volumeSlide，true； 函数down{mouseIsDown=true；} 函数up{mouseIsDown=false；} const volumeRangeWidth=volumeRange.getBoundingClientRect.width；//这将是100%的容量限制 函数卷滑动事件{ 如果鼠标落下{ 设x=event.offsetX； 如果event.target.className==卷容器{ x=数学公式x； 如果x<0 x=0；//检查是否过低 如果x>VolumerAgeWidth x=VolumerAgeWidth；//检查是否过高 volume.style.width=x+10+‘px’； } } } 身体{ 背景色：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%； 光标：指针； 大纲：无； } 体积