jQuery UI滑块-禁用滑块轨道上的点击

Question

我正在尝试找到一种方法来禁用我的jQuery UI滑块轨道上的点击。单击手柄是可以的，但如果用户单击轨道，则不希望手柄响应。

在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');

移除整个滑块（包括手柄）的点击事件，更符合我的需求，但我仍然需要能够拖动手柄。

- Ribs

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; }

- Jaron

---

完美的解决方案。一个小的修正是将 #navSlider .ui-slider-handle { point-events: auto; } 改为 #navSlider .ui-slider-handle { pointer-events: auto; }。在此要使用 pointer-events 而不是 point-events。 - harsha

@jaron 谢谢，这对我很有帮助。只是为了提醒大家，如果你的类与示例不匹配（因为我的不匹配），请查找你的父级 div 类或 ID，并将其更改为该值。例如，我的父级 div 是 .ui-slider-horizontal。但是，感谢您以最简单、干净的方式完成了这个伟大的工作，我简直想不起来了。 - Michael

惊人的解决方案，谢谢。 - Junaid Shaikh

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
    });

- Ryan Tomac

Answer 3

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

以下是解决方案：

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

敬礼，

- Amr Faisal

---

谢谢回复！我会在这周找时间试一试，如果有效的话，我会标记你的答案！ - Ribs

Answer 4

    $("#slider").slider({ disabled: true });

- sohaib

Answer 5

这应该可以解决它。

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

- codeetcetera

Answer 6

可运行的代码示例。

var sliding = false;

var slide = function (ev, ui) {

    if (ev.originalEvent.type !== 'mousemove') {
        sliding = false;
        return false;
    }

    sliding = true;

    console.log("I'm sliding.");

};

var start = function (ev, ui) {

    if (!sliding) {
       console.log("I'm not sliding.");
    }

};

var stop = function (ev, ui) {

    sliding ? console.log('I slid.') : console.log('I clicked.');

    sliding = false;

};

$('#slider').slider({
    slide: slide,
    start: start,
    stop: stop,
});

- yangmillstheory

---

非常有帮助，你使用了 ev.originalEvent.type。 - Redtopia

Answer 7

试试这个：

$("#slider").slider({ disabled: true });

- Waqas Shahid

---

对我来说，它仍然允许拖动滑块。 - John Smith

Answer 8

我也遇到了同样的问题，除非我决定从jquery ui本身中删除该句柄，否则我找不到任何解决方案

在ui.slider.js中，注释掉这些行。 //将单击绑定到滑块本身

this.element.bind('mousedown.slider', function(e) {
   self.click.apply(self, [e]);
   self.currentHandle.data("mouse").trigger(e);
   self.firstValue = self.firstValue + 1; //This is for always triggering the change event
});

- Karim Ahmed

Answer 9

嘿，已经超过2年了，但是这是我的解决方案：

$('a.ui-slider-handle').on('click',function(e){
    e.stopImmediatePropagation();
    return false;
});

- Ij_

Answer 10

只需添加 behaviour: none

noUiSlider.create(monday_shift_time_slider, {
    behaviour: "none"
});

- Kailash Chandra