Javascript 简单的js滑块，读取ofssetX使处理程序跳跃

我正在尝试使用纯javascript构建非常简单的水平滑块，我不想要任何像jquery这样的库。这项任务一开始似乎很容易，但我遇到了一个问题。我试图从

offsetX

属性获取读数，以将处理程序设置在正确的位置。问题是，当我在轨迹上滑动处理程序时，它有时会切换事件目标，并将读数从处理程序切换到轨迹，再切换到滑块容器。这整个过程的视觉效果不是最好的

我就是这样构建的：

<div class="slider">
    <div class="track">
        <div class="handler"></div>
    </div>
</div>

---

我认为解决方案是防止事件从错误的读数（从处理程序或轨迹）中读取，并且始终只使用相对于滑块div的鼠标位置。但如何做到这一点我还不知道。有人吗？；）

您的假设是正确的，因为

event.offsetX

是相对于原始事件目标的，您可以从处理程序、轨迹和滑块获得不同的值。您可以根据滑块和鼠标相对于客户端窗口的位置来计算偏移量。请看附带的代码片段

var拖动=false；
var sliderEl=document.querySelector（'.slider'）；
var handlerEl=document.querySelector（'.handler'）；
sliderEl.onmousemove=函数（事件）{
如果（拖动）{
var sliderRect=sliderEl.getBoundingClientRect（）；
var offset=Math.max（event.clientX-sliderRect.left，0）；
偏移量=数学最小值（偏移量、滑块等宽度）；
handlerEl.style.left=（偏移量-15）+“px”；
}
返回false；
};
handlerEl.onmousedown=函数（事件）{
拖动=真；
};
window.onmouseup=函数（事件）{
拖动=假；
}

#容器{
宽度：500px；
高度：40px；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.滑块，
.滑块*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.滑块{
背景：#ccc；
边框：实心1px#000；
宽度：100%；
身高：100%；
位置：相对位置；
}
.滑块.轨迹{
宽度：100%；
背景：#000；
高度：20px；
位置：绝对位置；
顶部：calc（50%-10px）；
}
.slider.track.handler{
边框：实心1px#fff；
宽度：30px；
高度：30px；
背景：石灰；
位置：绝对位置；
顶部：钙（50%-15px）；
左：0px；
光标：指针；
}

---

这就是我要找的，先生；）谢谢你的帮助；）

var dragging = false;

document.querySelector('.slider').onmousemove = function(event) {
    if(dragging) {
        document.querySelector('.handler').style.left = (event.offsetX - 15) + 'px';
    }
};

document.querySelector('.handler').onmousedown = function(event) {
    dragging = true;
};

window.onmouseup = function(event) {
    dragging = false;
}