Question

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

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

现在，当我开始拖动范围输入时，这将返回许多控制台日志。我想在onchange事件结束时获取值。怎么做到这一点？

谢谢;）

Answer 1

Hey Gururaj你可以尝试debounce功能。它会延迟事件处理程序的触发，因此您可以根据需要在onchange事件结束时获取输入值。您可以使用Lodash has a implementation of the debounce功能。

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

这里有一点demo给你。

Answer 2

您可以使用mousedown和mouseup这样的内容

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

要使用mouseup和mousedown事件作为上述示例的完整答案，这是您需要将之前的值与新值进行比较，并且如JYoThI所述我认为更改事件足以获取范围的最后一个值

其他信息 如果您需要实时更新div值，可以使用input事件

工作演示

＆＃13;

$('.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());
});

＆＃13;

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

＆＃13;

在onchange结束时触发输入类型范围的事件

2 个答案: