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

我正试图找到一种方法来禁用我的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

这应该照顾它。

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

Answer 2

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

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

Answer 3

@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 4

因为JQuery已经用鼠标按下事件绑定了你的容器（滑块）div，所以即使你解除你的范围div，它仍然会触发容器div，

这是解决方案：

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

问候，

Answer 5

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

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

Answer 7

我也有同样的问题，我找不到任何解决方案，除非我决定从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 }); 

Answer 8

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

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

Answer 9

试试这个：

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

Answer 10

我知道这已经很老了并且已经回答了，但是我提出的一个非JavaScript解决方案是将滑块放在包装器中，设置包装器样式以查看我希望轨道的外观并将滑块的高度设置为0。

需要进行一些调整以使所有内容都排好，但这对我来说非常简单且完美。

 
 
 
 .slide-wrap { width: 300px; height: 15px; border: solid 1px #666; margin-top: 10px; } .slider { width: 100%; height: 0; border: none; overflow: visible; } .slider .ui-slider-handle { margin: 2px 0 0; } 

http://jsfiddle.net/83Hwf/1/

Answer 11

这个为我做了诀窍（只需确保在销毁滑块对象时分离文档事件列表）

Answer 12

花了一段时间寻找解决方案或某些有助于让我更接近我所追求的东西，我想出了以下内容，它似乎适用于所有浏览器：

  var _sliderEvents = []; $('.slider').each(function (i) { var _slider = $(this); _sliderEvents.push($._data(_slider[0]).events.mousedown); $._data(_slider[0]).events.mousedown = {}; _slider.on({ mouseenter: function () { $._data(_slider[0]).events.mousedown = _sliderEvents[i]; }, mouseleave: function () { $._data(_slider[0]).events.mousedown = {}; } }, '.ui-slider-handle'); }); 

http://jsfiddle.net/digits/fxef8398/欢迎你🙂

Answer 13

只需添加行为：无

 noUiSlider.create（monday_shift_time_slider，{
    行为：“无”
 }）;