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

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

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

Answer 6

Working fiddle.

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

嘿，两年多了，但是，这是我的解决方案：

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

Answer 9

试试这个：

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

Answer 10

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

需要进行一些调整，以确保所有内容都排好，但这对我来说非常简单并且非常适合。

<div class="slide-wrap">
    <div class="slider"></div>
</div>

.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

这个对我有用（只需确保在销毁滑块对象时分离文档事件列表）

            <!doctype html>
            <html lang="en">
            <head>
              <meta charset="utf-8">
              <title>jQuery UI Slider - Default functionality</title>
              <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
              <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
              <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

              <style>
                .slider.ui-slider-disabled {
                    opacity: 1;
                }
              </style>

              <script>

              $(function() {

                $(".slider").slider({
                    range: true,

                    create: function( event, ui ) {

                       var disabled = true;
                       $(".slider").slider( "disable" );

                       $('.ui-slider-handle').on('mousedown',    function(event) {
                          disabled = false;
                          $(".slider").slider( "enable" );
                       });  

                        $(document).on('mouseup', function(event) {
                          if (!disabled) {
                             $(".slider").slider("disable");
                             disabled = true;
                          }
                       });  
                    }
                });

              });

              </script>



            </head>
            <body>
            <div class="slider"></div>

            </body>
            </html>

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, {
    behaviour: "none"
});

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

13 个答案: