javascript jQuery UI Slider - 禁用点击滑块轨道
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8330854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Slider - Disable click on slider track
提问by Ribs
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.
我试图找到一种方法来禁用对我的 jQuery UI Slider 轨道的点击。单击手柄没问题，但如果用户单击轨道，我不希望手柄响应。
slider set up in document.ready() as follows:
在 document.ready() 中设置的滑块如下：
$('#navScroller').slider({
value: 0,
start: onNavScrollStart,
slide: onNavScrollSlide,
animate: slideSpeed,
max: slideWidth
});
I tried both:
我都试过：
$('#navScroller').unbind('click');
and
和
$('#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!
关于如何实现这一点的任何想法？谢谢！
EDIT: 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.
从整个滑块、手柄和所有内容中删除点击，这更接近我的需要，但我仍然需要能够拖动手柄。
采纳答案by smokingoyster
This should take care of it.
这应该照顾它。
/**
* 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"));
回答by Jaron
There's a non-JS solution to this as well, using only two lines of CSS:
也有一个非 JS 解决方案，只使用两行 CSS：
/* Supress pointer events */
#navSlider { pointer-events: none; }
/* Enable pointer events for slider handle only */
#navSlider .ui-slider-handle { pointer-events: auto; }
回答by Ryan Tomac
@btate has the right idea (abandoning mousedown/touchstart that don't originate in the slider handle), but there is an easier way to get there. jQuery's event object will tell you which element initiated the event.
@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
});
回答by Amr Faisal
As JQuery already bound your container (slider) div with mouse down event, so even if you unbind your range div from it, it'll still fire on the container div,
由于 JQuery 已经用鼠标按下事件绑定了你的容器（滑块）div，所以即使你解除绑定范围 div，它仍然会在容器 div 上触发，
here's the solution:
这是解决方案：
$('#navScroller .ui-slider-range').mousedown(function() {
return false;
});
Regards,
问候，
回答by sohaib
$("#slider").slider({ disabled: true });
回答by yangmillstheory
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,
});
回答by Ij_
Heh, more than 2 years, but, here is my solution:
呵呵，2年多了，但是，这是我的解决方案：
$('a.ui-slider-handle').on('click',function(e){
e.stopImmediatePropagation();
return false;
});
回答by Karim Ahmed
I also had the same problem and i could not find any solution unless i decided to remove the handle from jquery ui itself
我也遇到了同样的问题，除非我决定从 jquery ui 本身中删除句柄，否则我找不到任何解决方案
In ui.slider.js, Comment this lines. // Bind the click to the slider itself
在 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
});
回答by Waqas Shahid
Try this:
试试这个：
$("#slider").slider({ disabled: true });
回答by Andi
Having spent a while looking for a solution or something that would help get me closer to what I was after, I came up with the following, which appears to work in all browsers:
花了一段时间寻找解决方案或有助于让我更接近我所追求的东西的东西后，我想出了以下内容，它似乎适用于所有浏览器：
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/You're welcome :)
