Событие 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>
Надеюсь это поможет!