在输入类型为range的onchange结束时触发事件

Question

如何触发事件或检测输入类型为范围的 onchange 事件的结束。

$('.slider').on('change',function(e){
      console.log(e.target.value);
});

现在，当我开始拖动范围输入时，这将返回许多控制台日志。我想在onchange事件结束时获得值。如何实现？

谢谢;)

- Gururaj Bhandarkar

---

尝试使用focusout事件。 - guradio

这已经是范围输入的工作方式了吗？https://jsfiddle.net/jvvL63s0/ 请注意，只有在拖动后释放手柄时，文本“输入”才会更新。 - Rory McCrossan

我什么也没改 - 那是你自己的代码。我所做的就是在另一个输入框中显示值。 - Rory McCrossan

@RoryMcCrossan，哈哈，是的！再次感谢你 :) - Gururaj Bhandarkar

@JYoThI，是的，onchange事件将为我提供最后一个值，但它也会给我通过滑动得到的值。唯一的解决方法是将值放入文本框中，然后从那里获取它，我想。 - Gururaj Bhandarkar

Answer 1

嘿，Gururaj，你可以尝试使用 debounce 函数。它延迟触发事件处理程序，因此您可以在 onchange 事件的最后获取所需的输入值。 Lodash实现了 debounce 函数，您可以使用它。

$range.on('change', _.debounce(function() {
  $display.text($(this).val());
}, 250));

这里有一个小的演示给你看。

- dawchihliou

---

这太完美了！谢谢 :) 这正好符合我的要求。在更改事件结束后触发。干杯 ;) - Gururaj Bhandarkar

没问题！很高兴能帮忙！ - dawchihliou

Answer 2

您可以使用类似以下方式的 mousedown 和 mouseup：

var prevValue = 0;
$('.slider').on('change',function(e){
      
});
// mouse down to check for previous value
$('.slider').on('mousedown',function(e){
      prevValue = $(this).val();
});
// mouse up when the mouse up from the slider with end value
$('.slider').on('mouseup' , function(){
    var ThisValue = $(this).val();
    if(ThisValue !== prevValue){  // check new value with previous value
     alert('Value Changed');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="slider" type="range" min="0" max="100"/>

作为一个例子，使用 mouseup 和 mousedown 事件的完整答案如下，如果您需要比较先前值和新值，并且像 JYoThI 所说的那样，我认为改变事件足以获取范围的最后一个值。 附加信息：如果您需要实时更新div值，则可以使用 input 事件。 工作演示。

$('.slider').on('change',function(e){
      console.log($(this).val());
});

//update sliderCount div with real time value
$('.slider').on('input',function(e){
      $('.sliderCount').text($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="slider" type="range" value="50" min="0" max="100"/>
<div class="sliderCount">50</div>

- Mohamed-Yousef

---

我认为只需要使用“on change”事件就可以获取范围的最后一个值。 - JYoThI

感谢您，Yousef。 这个解决方法也很好用 :) - Gururaj Bhandarkar

@GururajBhandarkar，你非常受欢迎..祝你有美好的一天 :-) - Mohamed-Yousef

@JYoThI 你说得对，我不是 input type range 方面的专家，但我认为 mouseup 和 mousedown 在将来可能会有其他用途，例如获取先前的值并将其与新值进行比较之类的操作。总之，非常感谢你，祝你有愉快的一天 :-) - Mohamed-Yousef