javascript - 如果我移动得太快，通过光标移动 div 的问题

Question

为了指定我的问题，我写了一个独立的问题示例。我想在包装容器内精确移动一个 div（仅在 x 方向上），就像一个轨迹栏。包装 div 应指定滑块的空间。

如果我慢慢移动光标，我的脚本可以工作。但是，如果我将光标移动得太快，我会在容器内的某处松开滑块 div。尤其是左右角。

如何在不需要库的情况下改进代码以获得稳定的解决方案？我知道 jQuery 有一种简单的解决方案，但如果我们能在纯 javascript 中找到一种方法，我会非常高兴。

var x_mouse_position;
var x_offset;
var isDown = false;
var new_slider_left_position;

var container = document.getElementById("container");
var slider = document.getElementById("slider");

slider.addEventListener('mousedown', function (e) {
    isDown = true;
    x_offset = slider.offsetLeft - e.clientX;
}, true);

document.addEventListener('mouseup', function () {
    isDown = false;
}, true);

document.addEventListener('mousemove', function (event) {

    if (isDown) {
        x_mouse_position = event.clientX;

        new_slider_left_position = x_mouse_position + x_offset;

        if (new_slider_left_position >= 0 && new_slider_left_position <= container.offsetWidth - slider.offsetWidth) {
            slider.style.left = new_slider_left_position + 'px';

        }

    }
}, true);

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

        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;
        }

        #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;
        }

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

标签： javascripthtml