javascript - 简单的 js slider ，读取 ofssetX 使处理程序跳跃

Question

我正在尝试使用纯 javascript 构建非常简单的水平 slider ，我不需要任何像 jquery 这样的库。任务一开始看起来很简单，但我遇到了问题。我正在尝试从 offsetX 属性获取读数，以将处理程序设置在正确的位置。问题是，当我在轨道上滑动处理程序时，它有时会切换事件目标并将读数从处理程序更改为轨道再到 slider 容器。这整个过程视觉效果并不是最好的。

这就是我构建它的方式:

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

以及背后的代码:

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

fiddle demo

我认为解决方案是防止事件发生错误读数(来自处理程序或轨道)，并始终仅使用相对于 slider div 的鼠标位置。但我还不知道该怎么做。有没有人？ ;)

Answer 1

您的假设是正确的，因为 event.offsetX 相对于原始事件目标，您从处理程序、轨道和 slider 获得不同的值。您可以根据 slider 和鼠标相对于客户端窗口的位置来计算偏移量。看一下附加的代码片段。

var dragging = false;
var sliderEl = document.querySelector('.slider');
var handlerEl = document.querySelector('.handler');

sliderEl.onmousemove = function(event) {
  if (dragging) {
    var sliderRect = sliderEl.getBoundingClientRect();
    var offset = Math.max(event.clientX - sliderRect.left, 0);
    offset = Math.min(offset, sliderRect.width);
    handlerEl.style.left = (offset - 15) + 'px';
  }
  return false;
};

handlerEl.onmousedown = function(event) {
  dragging = true;
};

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

#container {
  width: 500px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.slider,
.slider * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.slider {
  background: #ccc;
  border: solid 1px #000;
  width: 100%;
  height: 100%;
  position: relative;
}
.slider .track {
  width: 100%;
  background: #000;
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
}
.slider .track .handler {
  border: solid 1px #fff;
  width: 30px;
  height: 30px;
  background: lime;
  position: absolute;
  top: calc(50% - 15px);
  left: 0px;
  cursor: pointer;
}

<div id="container">

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

</div>