构建自定义音量滑块

Question

我发现了这个问题，并试图对其进行修复，因为其背后的逻辑与我要实现的逻辑相似。我已经设法以最少的编辑工作了。但它没有按预期工作。注意：我已将点击功能注释掉，因为它可以正常工作。怎么了如果单击，volumeBtn并且volumeRange在向左或向右滑动时不小心将光标移到div的高度或宽度之外，则mouseup当您停止单击鼠标时，事件监听器将不会执行。像1一样，单击后，一旦超出“ volumeRange” div的范围volumeBtn，就无法volumeBtn向左或向右拖动。从第零位置到所需位置存在闪烁。我想发生什么如果单击，volumeBtn然后停止单击鼠标，则mouseup即使光标不再位于上，也应执行该事件volumeRange。如果单击，即使光标不再位于上，volumeBtn您也应该能够volumeBtn向左或向右拖动volumeRange。  const volume = document.querySelector('.volume');    const volumeRange = document.querySelector('.volume-range');    const volumeBtn = document.querySelector('.volume-button');    // volumeRange.addEventListener("click", volumeClick    );    //     function volumeClick(event) {    //         let x = event.offsetX;    //         volume.style.width = (Math.floor(x) + 10) + 'px';    //     }        let mouseIsDown = false;        volumeBtn.addEventListener("mouseup", up);        volumeBtn.addEventListener("mousedown", down);        volumeRange.addEventListener("mousemove", volumeSlide);        function down(){ mouseIsDown = true; }        function up(){ mouseIsDown = false; }        function volumeSlide(event) {            if (mouseIsDown) {                let x = event.offsetX;                console.log(x);                volume.style.width = Math.floor(x + 10) + 'px';            }        }