javascript - 在我的代码中，mousemove 属性不起作用并更改了输入类型范围。能解释一下为什么吗？

Question

<div class="controls">
  <label for="spacing">Spacing:</label>
  <input type="range" min="10" max="200" name="spacing" data-sizing="px" value="10">
</div>

<script>
  const inputs = document.querySelectorAll('.controls input');

  function handleUpdate() {
    console.log(this.value);    
  }

  inputs.forEach(input => input.addEventListener('change', handleUpdate));
  inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
</script>

Answer 1

valueAsNumber 这是关键。

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input type="range" id="someid" min="10" max="200" name="spacing" data-sizing="px" value="10">
  </div>
  
  <script>
    const inputs = document.querySelectorAll('.controls input');
  
 
    inputs.forEach(input => input.addEventListener('change', function (e) {
        console.log(e.screenX); 
        e.target.valueAsNumber=e.screenX; 
    }));
    inputs.forEach(input => input.addEventListener('mousemove', function (e)
    {
        console.log(e.screenX); 
        e.target.valueAsNumber=e.screenX; 
    }));
  </script>