JQuery UI Slider - Отключить клик по слайдеру

Я пытаюсь найти способ отключить клик на моей дорожке слайдера jQuery. Нажатие на дескриптор в порядке, но я не хочу, чтобы дескриптор отвечал, если пользователь нажимает на дорожку.

установленный в документе document.ready() следующим образом:

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

Я пробовал оба:

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

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

ни один из них не работал, чтобы остановить слайдер от ответа на дорожки.

Любые идеи о том, как это сделать? Спасибо!

EDIT: Я только что обнаружил, что используя:

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

удаляет клики со всего ползунка, дескриптора и всего, что ближе к тому, что мне нужно, но мне все равно нужно перетащить его.

Ответ 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"));

Ответ 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
    });

Ответ 3

Там есть и не-JS-решение, используя только две строки CSS:

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

Ответ 4

Поскольку JQuery уже связал ваш контейнер (слайдер) div с событием mouse down, так что даже если вы отвяжете свой div div от него, он все равно будет запускаться в контейнере div,

здесь решение:

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

Привет,

Ответ 5

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

Ответ 6

У меня также была та же проблема, и я не мог найти решение, если только не решил удалить дескриптор из самого 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
});

Ответ 7

Хех, более 2 лет, но вот мое решение:

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

Ответ 8

Рабочая скрипта.

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

Ответ 9

Попробуйте следующее:

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

Ответ 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/

Ответ 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>

Ответ 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/ Добро пожаловать:)

Ответ 13

Просто добавьте поведение : none

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