jQueryUIRangeSlider，在更改事件之前或在不更改的情況下獲取值？-有解無憂

我正在使用 jQuery UI Range 滑塊https://jqueryui.com/slider/#range并且我想在兩點之間單擊并獲取我單擊的位置的值，而不啟動更改事件。所以這兩點不會移動。沒有更改前的事件。

$("#slider-range").slider({
    range: true,
    min: min,
    max: max,
    step: 1,
    values: [start, end],
    create: function( event, ui ) {
        update_tooltips(0);
    },
    change: function( event, ui ) {
        var index = ui.handleIndex;
        var seconds = ui.value;
    }
});

我該如何做到這一點？

uj5u.com熱心網友回復：

沒有更改前的事件。

不，但你在正確的軌道上。我體驗了所有可用的方法，發現了一些東西：

如果單擊滑塊軌道，則事件順序為.start(), .slide(), .stop(), .change();
所有方法都接收event作為引數，在方法中，我們可以通過檢查;.start()來確定點擊是否在句柄上。event.originalEvent.target
當event我們到達.slide()方法時，目標資訊不同，AFAICT 我們無法再找出最初點擊的內容。所以我們必須在到達這里之前跟蹤點擊了什么；
slide()檔案說：

事件中作為 ui.value 提供的值表示作為當前移動結果的句柄將具有的值。取消事件將阻止手柄移動

所以這是關鍵——我們可以獲得點擊的值，但我們仍然可以取消實際的更改。它沒有描述如何取消事件，但我嘗試過return false;并且成功了；

把所有這些放在一起：

let min = 0, max = 100;
let start = 20, end = 80;

// Add a variable to track where the click was
let clickOnHandle;

$("#slider-range").slider({
    range: true,
    min: min,
    max: max,
    step: 1,
    values: [start, end],
    create: function( event, ui ) {
        console.log('create');
    },
    start: function(event, ui) {
        // Add a start handler, where we can investigate what was clicked
        console.log('start');
                
        // If this was a click on a handle, it will have this class. 
        // Track that boolean result with our variable.
        clickOnHandle = $(event.originalEvent.target).hasClass('ui-slider-handle');
    },
    stop: function(event, ui) {
        console.log('stop');
    },
    slide: function(event, ui) {
        // Add a slide handler
        console.log('slide', ui.value);
        
        // If the click was not on a handle, we can bail out and stop
        // the actual change from happening, while still getting the
        // clicked value.
        if (! clickOnHandle) {
            $('#clicked').text(ui.value);
            return false;
        }
        
        // If this was a real change, update the display
        $('#value').text(ui.value);
    },
    change: function(event, ui) {
        console.log('change');
    }
});

<link href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>

<div id="slider-range"></div>

<div>
    <p>Current Value: <span id="value">20</span></p>
    <p>Clicked Value: <span id="clicked"></span></p>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441180.html

標籤：jQuery

上一篇：滑塊范圍在0和1之間，步長為0.05

下一篇：每頁隨機顯示最多3個區塊