单击并拖动时，Range Slider oninput函数不执行

Question

我有一个简单的范围滑块，定义如下：

    <input class="panning-control" type="range" min="0" max="100" step="1" value="0">

在Javascript标记中，我声明

var panControl = document.querySelector('.panning-control');

然后具有以下oninput函数：

panControl.oninput = function() {
  //a bunch of irrelevant computations involving panControl.value
}

问题在于，当我快速单击并拖动滑块时，oninput函数不会针对每个“步骤”执行。 例如，如果我将滑块从0单击并拖动到50，理论上应该将oninput函数执行50次，因为step = 1且滑块从0变为50。现在，如果单击并拖动滑块，它会跳过执行大多数步骤中的函数，而我在oninput上执行的计算用错误的数字完成，因为函数的每次执行都取决于最后一次执行的计算。 如果我只单击一次滑块，然后使用向左和向右箭头键来增加和减少滑块，它就可以工作。 有人对此有解决方案吗？ 我可以使用另一个旋钮/控制包吗？

Answer 1

尝试使用addEventListener（event，handler，bubble）方法

 var panControl = document.querySelector('.panning-control'); panControl.addEventListener("input", function(evt) { doSomething(evt.target.value); }, false); function doSomething(value) { var output = document.querySelector('.output'); output.textContent = value; } 

  <input class="panning-control" type="range" min="0" max="100" step="1" value="0" /> <span class="output"></span>