Question

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

这就是我构建这个的方式：

<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

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

Answer 1

您的假设是正确的，因为import java.util.HashSet; import java.util.Set; public class Dupe { public static void main (String[] args) { int[] myArray = {1, 2, 2, 3, 1, 4, 5, 6, 7, 4}; Set<Integer> set = new HashSet<>(); for (int a : myArray) { if (!set.add(a)) { System.out.println(a); } } } }相对于原始事件目标，您从处理程序，轨道和滑块获得不同的值。您可以改为根据相对于客户端窗口的滑块和鼠标位置计算偏移量。请查看附加的代码段。

＆＃13;

event.offsetX

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: