Событие mousedown rangelider.js не работает на кнопке слайдера

Мышь не стреляет. Необходимо знать событие Hold, чтобы можно было отключить обновление значения слайдера. мой код

var sliding = false;
function update_seek_value(value){
  if(!sliding){
            $("#replay-slider").val(value).change();
  }
}
$('.slider_button_class_name').on('mousedown',function(){
   sliding = true;
});

2 ответа

Спасибо за помощь в этом, я все же нашел решение самостоятельно. Надеюсь, что это поможет кому-то, кто застрял в подобной проблеме. Решением было переопределить js 'rangelider.min.js'

Насколько я знаю, можно отключить "события", используя $("селектор"). Off ("mousedown") или остановив распространение событий. я использовал /yourlocalpath/rangeslider.js, упомянутый в rangelider.js.org, есть событие javascript, которое останавливает событие распространения для таких событий, как mousedown и touchstart, но в основном это прослушивание события mousdown, поэтому я просто обновил свой флаг выше кода остановки событий. Код в rangelider.js, где я добавил свой флаг.

j.prototype.handleDown = function(a) {
console.log("mousedown event triggered"); // TRY TO FIND THIS LINE IN YOUR DOWNLOADED JS OF RANGESLIDER
sliding = true;                           // ADD YOUR MOUSEDOWN EVENTS HERE
if (a.preventDefault(), this.$document.on(this.moveEvent, this.handleMove), this.$document.on(this.endEvent, this.handleEnd), !((" " + a.target.className + " ").replace(/[\n\t]/g, " ").indexOf(this.options.handleClass) > -1)) {
  var b = this.getRelativePosition(a),
    c = this.$range[0].getBoundingClientRect()[this.DIRECTION],
    d = this.getPositionFromNode(this.$handle[0]) - c,
    e = "vertical" === this.orientation ? this.maxHandlePos - (b - this.grabPos) : b - this.grabPos;
  this.setPosition(e), b >= d && b < d + this.handleDimension && (this.grabPos = b - d)
}
}

$("#range-control").rangeslider({
    polyfill: false,
    onSlideEnd: function(position, value){
        //console.log('Position', position, 'Value', value);
        $("#selectedRange").text(value);
    }
});
body, input[type=text] { text-align: center; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/1.2.1/rangeslider.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/1.2.1/rangeslider.min.js"></script>
<input id="range-control" type="range" min="0" max="100" step="1" value="0">
<span id="selectedRange"></span>  

Надеюсь это поможет!

Другие вопросы по тегам