jQuery UI Slider - 禁用单击滑块轨道 [英] jQuery UI Slider - Disable click on slider track

问题描述

我正试图找到一种方法来禁用我的jQuery UI Slider轨道上的点击。单击句柄即可，但如果用户点击该轨道，我不希望句柄响应。

I'm trying to find a way to disable the click on my jQuery UI Slider's track. Clicking on the handle is ok but I do not want the handle to respond if the user clicks on the track.

在document.ready（）中设置滑块，如下所示：

slider set up in document.ready() as follows:

$('#navScroller').slider({
      value: 0,
      start: onNavScrollStart,
      slide: onNavScrollSlide,
      animate: slideSpeed,
      max: slideWidth
});

我试过了两个：

$('#navScroller').unbind('click');

和

$('#navScroller .ui-slider').unbind('click');

这两项都没有阻止滑块响应曲目点击。

neither of which worked to stop the slider from responding to track clicks.

关于如何实现这一目标的任何想法？谢谢！

Any ideas on how to accomplish this? Thanks!

编辑：
我刚刚发现使用：

I just discovered that using:

$('#navScroller').unbind('mousedown');

从整个滑块，手柄和所有内容中删除点击，这更接近我的需要，但我仍然需要能够拖动手柄。

removes clicks from the whole slider, handle and all, which is closer to what i need but I still need to be able to drag the handle.

推荐答案

这应该照顾它。

/**
 *  Turns off the track click for the given slider control
 */

function disableSliderTrack($slider){

    $slider.bind("mousedown", function(event){

        return isTouchInSliderHandle($(this), event);   

    });

    $slider.bind("touchstart", function(event){

        return isTouchInSliderHandle($(this), event.originalEvent.touches[0]);

    });
}

function isTouchInSliderHandle($slider, coords){

    var x = coords.pageX;
    var y = coords.pageY;

    var $handle = $slider.find(".ui-slider-handle");

    var left = $handle.offset().left;
    var right = (left + $handle.outerWidth());
    var top = $handle.offset().top;
    var bottom = (top + $handle.outerHeight());

    return (x >= left && x <= right && y >= top && y <= bottom);    
}


    disableSliderTrack($(".ui-slider"));

这篇关于jQuery UI Slider - 禁用单击滑块轨道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！