javascript - 在鼠标按下事件中连续改变范围输入元素的位置(单步)

Question

我正在尝试使用范围输入元素构建一个 slider ，该元素在单击、滚动或长按(连续按下)时移动 1 步。我有点击和滚动所需的逻辑，但是相同的逻辑似乎不适用于鼠标按下事件(长按/连续按下)。

到目前为止，这是我的代码(用于单击和按下鼠标):https://jsfiddle.net/ykun1k13/

var cur = 0;

d3.select('input')
  .on("input", function() {

    var threshold = d3.select(this).node().value;
    if (threshold > cur) {
      cur++
    } else if (threshold < cur) {
      cur--
    }
    d3.select(this).node().value = cur;

  });

d3.select('input')
  .on("mousedown", function() {
    var node1 = this;

    int = setInterval(function() {
      var threshold = d3.select(node1).node().value;
      if (threshold > cur) {
        cur++
      } else if (threshold < cur) {
        cur--
      }
      d3.select(node1).node().value = cur;
    }, 100)

  }).on('mouseup', function() {
    clearInterval(int);
  });

.slider {
  -webkit-appearance: none;
  width: 400px;
  height: 8px;
  background: #d3d3d3;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<p>
  <input class="slider" type="range" min="0" max="25" step="1" value="0" orient="vertical">
</p>

我添加了一个鼠标松开事件和 setInterval 以 100 毫秒的间隔连续跟踪鼠标向下直到用户停止按下鼠标。

看起来'mouse down'在这里没有作为'input'事件工作，阈值不是作为光标的位置而是作为 slider 的当前位置获取的。

这可能是什么问题？我怎样才能让这项工作适用于连续/长按？

Answer 1

mousedown 和 mouseup 事件不应持续触发，因为它们仅在按下或释放鼠标时触发。

会有两个定时器，一个用于mousedown，另一个用于changeValue()，当mousedown时间超过500ms时，它会触发 changeTimer 计算基于 isIncreasing 的输入值。当 mouseup 时，清除两个计时器。

var mouseTimer,
    changeTimer,
    cur = 0,
    threshold = 0,
    isIncreasing = false;

d3.select('input')
  .on('input', function() {
    threshold = +this.value;
    if(+threshold > +cur) {
      cur++;
      isIncreasing = true;
    }
    else{
      cur--;
      isIncreasing = false;
    }
    this.value = cur;
  })

d3.select('input')
  .on("mousedown", function() {
    var input = this;
    ClearTimeout();
      mouseTimer = setTimeout(function() {
        changeValue(input);
      }, 500);
})

d3.select(window)
  .on('mouseup', function() {
    ClearTimeout();
  });

function changeValue(input){
  changeTimer = setTimeout(function(){
    if(isIncreasing){
      cur++;
      cur = cur > threshold ? threshold : cur;
    }
    else {
      cur--;
      cur = cur < threshold ? threshold : cur;
    }
    input.value = cur;
    changeValue(input);
  }, 100)
}

function ClearTimeout() {
  clearTimeout(mouseTimer);
  clearTimeout(changeTimer);
}

.slider {
  -webkit-appearance: none;
  width: 400px;
  height: 8px;
  background: #d3d3d3;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<p>
  <input class="slider" type="range" min="0" max="25" step="1" value="0" orient="vertical">
</p>