如何判断输入范围元素在拖动时是增加还是减少

Posted 2023-03-13

【中文标题】如何判断输入范围元素在拖动时是增加还是减少

【英文标题】：how to tell if an input range element is increasing or decreasing while dragging

【发布时间】：2018-04-30 20:02:42

【问题描述】：

所以我有一些<input type="range"> 元素，我需要知道在用户拖动范围滑块时值是增加还是减少。到目前为止，我能够找到/实现的只是用户第一次触摸或释放滑块并将当前变化的值与最后一个数字进行比较时使用的东西，但这不起作用，因为它无法补偿何时用户仍在拖动。

有没有办法只使用 JS 数学来实现这一点？

【参考方案1】：

我从this 帖子中发现，在捕获onInput 或onChange 事件方面看起来并不是这样。要捕捉滑块的每一个动作，请使用onInput。以下是说明的差异。

您可以按照您的想法执行相同的逻辑，即保存最后一个值，然后检查当前值是小于还是大于最后一个值，以查看它是增加还是减少。

编辑：请注意，如果您使用箭头键移动滑块，两个事件会同时触发。如果您使用鼠标，则只有在您停止移动并松开鼠标按钮时才会触发两者。

var lastNum = 0;
function onInput(value) 
  if(lastNum < value) 
      console.log("increasing");
   else 
      console.log("decreasing");
  
  lastNum = value;
  console.log("onInput: " + value);


function onChange(value) 
  console.log("onChange: " + value);

<input type="range" oninput="onInput(this.value)" onchange="onChange(this.value)">

【讨论】：

哇！看起来我把事情复杂化了。我考虑过跟踪以前的更改，但没有这么简单。谢谢

@zero 我也在跟踪变化，但只是最后一个变化。所以你一开始是对的。