如何在用戶釋放范圍滑塊時觸發“更改”事件，即使該值未更改

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

試試這個。在mousedown control中將變量設置為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'>