如何在用户释放范围滑块时触发"change"事件，即使值未更改

Question

var control = $('#control');
var zone = 2;
const SNAP_TARGET = 1;
const SNAP_DISTANCE = 0.1;
const LEEWAY = 0.01;
function getSliderInfo() {
const sliderVal = parseFloat(control.val());
return [sliderVal, sliderVal - SNAP_TARGET];
}
control.on('input', function () {
const [position, difference] = getSliderInfo();
let offset = -difference;
if (difference < 0 && zone === 3) {
if (difference <= -SNAP_DISTANCE) {
zone = 1;
}
}
else if (difference > 0 && zone === 1) {
if (difference >= SNAP_DISTANCE) {
zone = 3;
}
}
else {
offset = 0;
if (zone === 2) {
if (Math.abs(difference) > LEEWAY) {
zone = difference < 0 ? 1 : 3;
}
else {
control.val(1);
}
}
}
control.val(position + offset);
});
control.on('change', function () {
const difference = getSliderInfo()[1];
if (Math.abs(difference) <= LEEWAY) {
control.val(1);
zone = 2;
}
console.log('change event occured');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='control' type='range' min='0' max='2' value='1' step='any'>

我做了一个滑块，它有一个额外的功能，可以让用户轻松地将其设置到准确的中心。试试看它是如何将它停在中间的，但如果你继续拖动它经过停止区域或以其他方式拖动它，你可以将它滑动到任何位置。

如果用户将滑块拖动到中点并释放鼠标，则应去除"粘性"，这样当用户再次拖动时，"粘性"就不会开始"卡住"。

问题是，如果用户将其从开始的中点滑出，然后将其滑回中点，则change事件不会触发，因为最终值实际上没有改变。

我尝试使用mouseup/pointerup而不是change，但有一种情况不起作用。您可以单击并按住滑块旋钮，然后将光标垂直移动到滑块区域之外，然后释放鼠标。mouseup/pointerup事件不会触发，因为您在光标位于输入之外时释放了按钮。

当用户释放范围滑块时，即使值没有改变，如何激发change事件？

Answer 1

点击替换更改：-

var control = $('#control');
var zone = 2;
const SNAP_TARGET = 1;
const SNAP_DISTANCE = 0.1;
const LEEWAY = 0.01;
function getSliderInfo() {
const sliderVal = parseFloat(control.val());
return [sliderVal, sliderVal - SNAP_TARGET];
}
control.on('input', function () {
const [position, difference] = getSliderInfo();
let offset = -difference;
if (difference < 0 && zone === 3) {
if (difference <= -SNAP_DISTANCE) {
zone = 1;
}
}
else if (difference > 0 && zone === 1) {
if (difference >= SNAP_DISTANCE) {
zone = 3;
}
}
else {
offset = 0;
if (zone === 2) {
if (Math.abs(difference) > LEEWAY) {
zone = difference < 0 ? 1 : 3;
}
else {
control.val(1);
}
}
}
control.val(position + offset);
});
control.on('mouseup', function () {
const difference = getSliderInfo()[1];
if (Math.abs(difference) <= LEEWAY) {
control.val(1);
zone = 2;
}
console.log('change event occured');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='control' type='range' min='0' max='2' value='1' step='any'>

Answer 2

试试这个。在control的mousedown中将变量设置为true，并在document的mouseup事件中进行检查

var control = $('#control');
let mousedown = false;
var zone = 2;
const SNAP_TARGET = 1;
const SNAP_DISTANCE = 0.1;
const LEEWAY = 0.01;
function getSliderInfo() {
const sliderVal = parseFloat(control.val());
return [sliderVal, sliderVal - SNAP_TARGET];
}
//control.on('click',function(){console.log("changed")})
control.on('input', function () {
const [position, difference] = getSliderInfo();
let offset = -difference;
if (difference < 0 && zone === 3) {
if (difference <= -SNAP_DISTANCE) {
zone = 1;
}
}
else if (difference > 0 && zone === 1) {
if (difference >= SNAP_DISTANCE) {
zone = 3;
}
}
else {
offset = 0;
if (zone === 2) {
if (Math.abs(difference) > LEEWAY) {
zone = difference < 0 ? 1 : 3;
}
else {
control.val(1);
}
}
}
control.val(position + offset);
});
$(document).on('mouseup',function(){
if(mousedown){
change();
mousedown = false;
}
})
control.on('mousedown',() => mousedown = true);
function change() {
const difference = getSliderInfo()[1];
if (Math.abs(difference) <= LEEWAY) {
control.val(1);
zone = 2;
}
console.log('change event occured');
}
control.on('change', change);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='control' type='range' min='0' max='2' value='1' step='any'>