Question

标题总结了它。我试图在input事件中减去mousewheel的值并求和。减法成功，但总和总是跳到input的最大值。没有库，纯JS和兼容性对我来说无关紧要，因为它是一个电子应用程序

我有另一个选项，我并不完全倾向于使用它，因为对我来说，它很难看：创建一个变量来求和并减去这些值，设置最大值和最小值它发送到input.value（但由于某种原因，我无法将最小值或最大值设置为变量）。

现在的问题是：这是一个错误还是我做错了什么？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

奇怪的是，这只会影响添加情况，因为-运算符会执行隐式整数转换。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

鼠标滚轮事件非常快速地触发，您的范围仅为1-5，因此很难仅仅“滚动”1.可能不是1-5类场景的良好用例。

以下是“填充”滚轮的代码，因此它不会快速启动。

let range = document.getElementById("test");
let padVal = false;

let onWheel = (function (evt) {
    if (!evt) evt = event;
    let wDelta;
    let min = range.min;
    let max = range.max;
    let val = range.value;
    let spread = max - min + 1;
    let pad = 100 / spread;
    
    if(padVal === false)
      padVal = val * pad;
  
    console.log(min,max,val,spread,pad,padVal,Math.floor(padVal / pad));
  
    wDelta = evt.wheelDelta > 0 ? 1 : -1;
    padVal += wDelta
    range.value = Math.floor(padVal / pad);
  
    document.getElementById('out').innerHTML = range.value;
});

range.addEventListener('mousewheel', onWheel ,false);

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

Javascript：输入值总和在mousewheel事件上跳转到最大值

2 个答案: