鼠标快速移动时div滑块拖拽丢失，求原生JS稳定解决方案

问题根源 #

当前代码出现快速拖动丢失定位的核心原因有两个：

1. 边界更新逻辑有缺陷：仅当计算出的滑块位置完全落在合法区间时才更新位置，当鼠标快速移动超出容器范围时，计算值超出区间就不会触发位置更新，滑块会停留在上一次合法位置，出现「丢失定位」的假象
2. 未阻止浏览器默认行为：拖动过程中容易触发文本选择、元素拖拽等浏览器默认行为，干扰拖动事件的正常触发

优化方案 #

只需要修改核心的边界判断逻辑，补充默认行为阻止即可，以下是完整可运行代码：

HTML 代码 #

<div id="container">
  <div id="slider"></div>
</div>

CSS 代码 #

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
}

body {
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}

#container {
    position: relative;
    width: 400px;
    height: 30px;
    background-color: cornflowerblue;
    border-radius: 5px;
    overflow: hidden;
    user-select: none; /* 防止拖动时选中文本 */
}

#slider {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border: 1px solid black;
    width: 50px;
    height: 100%;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.2);
    cursor: move;
}

JavaScript 代码 #

let x_offset;
let isDown = false;

const container = document.getElementById("container");
const slider = document.getElementById("slider");
const maxMoveDistance = container.offsetWidth - slider.offsetWidth; // 预计算最大可移动距离

slider.addEventListener('mousedown', function (e) {
    isDown = true;
    x_offset = slider.offsetLeft - e.clientX;
    e.preventDefault(); // 阻止浏览器默认拖拽、选中文本行为
}, true);

// 鼠标松开、移出页面都停止拖动
function stopDrag() {
    isDown = false;
}
document.addEventListener('mouseup', stopDrag, true);
document.addEventListener('mouseleave', stopDrag, true);

document.addEventListener('mousemove', function (event) {
    if (!isDown) return;
    // 计算新位置，用Math.max和Math.min直接钳制到合法区间
    const newLeft = Math.max(0, Math.min(maxMoveDistance, event.clientX + x_offset));
    slider.style.left = newLeft + 'px';
}, true);

核心修改点说明 #

• 把原来的区间判断改为值钳制逻辑：不管鼠标移动到多远的位置，都把滑块位置限制在0到最大可移动距离之间，始终触发位置更新，不会出现卡住的情况
• 新增preventDefault阻止默认行为，避免浏览器自带的拖拽逻辑干扰自定义拖动
• 新增mouseleave监听，鼠标移出页面时自动停止拖动，避免拖动状态异常
• 预计算最大可移动距离，避免每次mousemove都重复计算属性，提升性能

内容的提问来源于stack exchange，提问作者gear