标题总结了一下。我正试图减去和input事件的值。减法累加,但总和总是跳到mousewheel的最大值。没有库,纯JS和兼容性对我来说是无关紧要的,因为它是一个电子应用程序。
我有另一个选项,我不完全倾向于使用,因为对我来说,它很难看:创建一个变量来求和和和减去值,设置最大值和最小值并发送到input(但由于某种原因,我无法将最小值或最大值设置为一个变量)。
现在的问题是:是虫子还是我做错了什么?

let range = document.getElementById("test");
let onWheel = (function (evt) {
    if (!evt) evt = event;
    let wDelta;
    wDelta = evt.wheelDelta > 0 ? 1 : -1;
    if (wDelta === 1) {
        range.value += wDelta;
        console.log(wDelta);
    } else {
        range.value -= 1;
        console.log(wDelta);
    }
    document.getElementById('out').innerHTML = range.value;
    console.log(range.value);
});

range.addEventListener('mousewheel', onWheel ,false);

<input type="range" id="test" min="1" max="5">
<output id="out"></output>

最佳答案

事实证明,这实际上是一个数据类型问题:由于range.value返回一个字符串,range.value += 1将执行字符串连接而不是整数相加。解决方法很简单:

range.value = parseInt(range.value) + wDelta;

奇怪的是,这只影响加法情况,因为-运算符执行隐式整数转换。
let range = document.getElementById("test");
let onWheel = (function(evt) {
  if (!evt) evt = event;

  let wDelta = evt.wheelDelta > 0 ? 1 : -1;
  range.value = parseInt(range.value) + wDelta;

  document.getElementById('out').innerHTML = range.value;
});

range.addEventListener('mousewheel', onWheel, false);

<input type="range" id="test" min="1" max="5">
<output id="out"></output>

08-18 06:29
查看更多