rangeslider.js mousedown 事件在滑块按钮上不起作用答案

【问题标题】：rangeslider.js mousedown event not working on slider buttonrangeslider.js mousedown 事件在滑块按钮上不起作用
【发布时间】：2017-09-06 16:16:37
【问题描述】：

鼠标事件未触发。需要知道保持事件，这样才能禁用滑块值的更新。我的代码是，

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

【问题讨论】：

$(".slider_button_class_name").on("输入变化", function() { doSomething(); });使用 jQuery 可以替代这个答案。
这不起作用。在您的情况下，事件被附加到可见的输入类型范围。 mousedown 事件也很容易附加在它上面。我将它与 rangeslider.js 一起使用，并且这个作为 div 的滑块按钮不会将 mousedown 事件附加到它。网址：rangeslider.js.org
检查答案已更新！！！根据您的要求
mousedown 事件是，按下鼠标左键我已经使用了 rangeslider.js.org 中提到的所有功能。没有什么与 mousedown 相关。即使您将 mousedown 事件添加到滑块按钮 div 是 $(".rangeslider__handle").mousedown(function(){ //do something . });它不起作用。
我很高兴你按照自己的方式行事 :-) 但如果你向我解释我的答案不起作用？比我会给你的答案投票

标签： javascript jquery rangeslider

【解决方案1】：

$("#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>

希望这会有所帮助！

【讨论】：

【解决方案2】：

感谢您在这方面的帮助，我自己找到了解决方案。希望这能帮助遇到类似问题的人。解决方案是覆盖 js 'rangeslider.min.js'

据我所知，可以通过使用 $('selector').off("mousedown") 或停止事件传播来禁用“事件”。我正在使用rangeslider.js.org中提到的'/yourlocalpath/rangeslider.js' 有一个javascript事件正在停止mousedown和touchstart等事件的传播事件，但基本上它正在监听mousdown事件，所以我在停止事件popogation的代码上方更新了我的标志。 rangeslider.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)
}
}

【讨论】：