jQuery UI Slider - 禁用单击滑块轨道

Question

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

在document.ready()中设置的滑块如下:

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

我试过两个:

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

和

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

两者都没有阻止滑块响应曲目点击.

有关如何实现这一目标的任何想法？谢谢!

编辑:我刚刚发现使用:

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

删除整个滑块,手柄和所有的点击,这更接近我需要但我仍然需要能够拖动手柄.

Answer 1

还有一个非JS解决方案,只使用两行CSS:

/* Supress pointer events */
#navSlider { pointer-events: none; }
/* Enable pointer events for slider handle only */
#navSlider .ui-slider-handle { pointer-events: auto; }

Answer 2

@btate有正确的想法(放弃不起源于滑块手柄的mousedown/touchstart),但是有一种更简单的方法可以实现.jQuery的事件对象将告诉您哪个元素启动了该事件.

var sliderMouseDown = function (e) { // disable clicks on track
    var sliderHandle = $('#navScroller').find('.ui-slider-handle');
    if (e.target != sliderHandle[0]) {
        e.stopImmediatePropagation();
    }
};

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

Answer 3

由于JQuery已经通过鼠标按下事件绑定了您的容器（滑块）div，因此即使您将范围div与其绑定，它仍然会在容器div上触发，

解决方法是：

$('#navScroller .ui-slider-range').mousedown(function() {
      return false;
});

问候，

Answer 4

这应该照顾好它。

/**
 *  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"));