我正在使用 jRange slider ，它采用隐藏的 HTML 输入并添加自定义 slider ，并对其进行自定义，以便使用三个 slider 时，总值(value)不会超过 100。我已经设法让一切正常工作对于单击并拖动，但是只需单击 slider 本身即可使 handle 移动到可接受的范围之外。我尝试了各种方法来禁用点击，但似乎没有任何效果。即
#quant1 { pointer-events: none; }
$("#quant1").on("click mouseup mousedown", function(e){
e.preventDefault();
console.log("trying to intercept----");
return false;
});
$("#quant1").unbind("click");
我的代码如下
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="./jquery.range.css">
<script src="./jquery.range.js"></script>
<script>
</script>
<style>
#quant1 { pointer-events: none; }
</style>
</head>
<body>
<div id="foo1" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant1" value="0" />
<div id="foo1" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant2" value="0" />
<div id="foo2" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant3" value="0" />
<div id="foo3" style="height: 100px; width: 100%;" ></div>
<div id="totalRemaining">100 </div>
<script >
var maxVal=100;
$_slider1= $("#quant1");
$_slider1.find('.ui-slider-handle');
$_slider2= $("#quant2");
// With JQuery
$('#quant1').jRange(
{
from: 0.0,
to: 100.0,
step: 1,
scale: [0,25,50,75,100],
format: '%s',
width: 300,
showLabels: true,
snap: true,
id: "thisisanid",
slide:function(){console.log("sliding")},
ondragend: function(){ console.log("ondragend");
var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){$_slider1.jRange('setValue', ""+reduceSliderVal);}
}
}).change(function(){
console.log("change");
var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){ $_slider1.jRange('setValue', ""+reduceSliderVal);}
setTimeout(function(){
console.log("slider 1 timeout onchange");
var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){ $_slider1.jRange('setValue', ""+reduceSliderVal);}
}, 3000);
//reduces the current slider val if needed
$_slider1.trigger("ondragend");
console.log("onchange slider1", reduceSliderVal);
console.log("after");
}).on('input mousedown mouseup touchstart click change ondrag', function (e) {
console.log("triggering dragend slider1");
$_slider1.trigger("ondragend");
});
$('#quant2').jRange({
from: 0,
to: 100,
step: 1,
scale: [0,25,50,75,100],
format: '%s',
width: 300,
showLabels: true,
ondragend: function(){
var reduceSliderVal= reduceSlider($_slider2, $_slider1);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){$_slider2.jRange('setValue', ""+reduceSliderVal);}
}
}).change(function(){
var reduceSliderVal= reduceSlider($_slider2, $_slider1);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){ $_slider2.jRange('setValue', ""+reduceSliderVal);} //reduces the current slider val if needed
});
function reduceSlider(currentSlider, otherSlider, otherSlider2)
{ // if the slider value of the just-moved slider is too high, reduce it to the appropriate amount
var negativeExcess= maxVal - ( parseInt(currentSlider.val() ) + parseInt(otherSlider.val() ) );
if (negativeExcess < 0)
{
console.log("excess calculated", negativeExcess);
console.log("returning ", (maxVal - parseInt( otherSlider.val() ) ) );
return (maxVal - parseInt(otherSlider.val()) ); //calculate remainder without involving the current slider since the user may drag the current slider too far beyond the max value, resulting in the current slider being set backwards too far.
}else{
return false;
}
}
</script>
</body>
</html>
最佳答案
jRange 插件提供了函数 onbarclicked 来监听 slider 何时被单击。不幸的是，这是在 slider 更新之后调用的，这使得它对您的目的不太有用。
看一下 jRange 源代码，如果我们能够重写插件的 barClicked 函数，那就太理想了。然而，不幸的是这个函数已经通过使用闭包变成了私有(private)函数。
这给你留下了直接编辑插件本身的不太理想的选择。我在下面提供了一个示例，其中 barClicked 函数现在仅返回 false，从而禁用用户通过单击而不是拖动来调整范围栏的能力。
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://s3.amazonaws.com/so-answers/jquery.range.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/so-answers/jquery.range-modified.js"></script>
<script>
</script>
<style>
#quant1 { pointer-events: none; }
</style>
</head>
<body>
<div id="foo1" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant1" value="0" />
<div id="foo1" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant2" value="0" />
<div id="foo2" style="height: 100px; width: 100%;" ></div>
<input type="hidden" id="quant3" value="0" />
<div id="foo3" style="height: 100px; width: 100%;" ></div>
<div id="totalRemaining">100 </div>
<script >
var maxVal=100;
$_slider1= $("#quant1");
$_slider1.find('.ui-slider-handle');
$_slider2= $("#quant2");
// With JQuery
$('#quant1').jRange(
{
from: 0.0,
to: 100.0,
step: 1,
scale: [0,25,50,75,100],
format: '%s',
width: 300,
showLabels: true,
snap: true,
id: "thisisanid",
slide:function(){console.log("sliding")},
ondragend: function(){ console.log("ondragend");
var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){$_slider1.jRange('setValue', ""+reduceSliderVal);}
}
}).change(function(){
console.log("change");
var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){ $_slider1.jRange('setValue', ""+reduceSliderVal);}
setTimeout(function(){
console.log("slider 1 timeout onchange");
var reduceSliderVal= reduceSlider($_slider1, $_slider2);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){ $_slider1.jRange('setValue', ""+reduceSliderVal);}
}, 3000);
//reduces the current slider val if needed
$_slider1.trigger("ondragend");
console.log("onchange slider1", reduceSliderVal);
console.log("after");
}).on('input mousedown mouseup touchstart click change ondrag', function (e) {
console.log("triggering dragend slider1");
$_slider1.trigger("ondragend");
});
$('#quant2').jRange({
from: 0,
to: 100,
step: 1,
scale: [0,25,50,75,100],
format: '%s',
width: 300,
showLabels: true,
ondragend: function(){
var reduceSliderVal= reduceSlider($_slider2, $_slider1);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){$_slider2.jRange('setValue', ""+reduceSliderVal);}
}
}).change(function(){
var reduceSliderVal= reduceSlider($_slider2, $_slider1);// returns the appropriate slider value or returns false if no adjustement is needed.
if (reduceSliderVal){ $_slider2.jRange('setValue', ""+reduceSliderVal);} //reduces the current slider val if needed
});
function reduceSlider(currentSlider, otherSlider, otherSlider2)
{ // if the slider value of the just-moved slider is too high, reduce it to the appropriate amount
var negativeExcess= maxVal - ( parseInt(currentSlider.val() ) + parseInt(otherSlider.val() ) );
if (negativeExcess < 0)
{
console.log("excess calculated", negativeExcess);
console.log("returning ", (maxVal - parseInt( otherSlider.val() ) ) );
return (maxVal - parseInt(otherSlider.val()) ); //calculate remainder without involving the current slider since the user may drag the current slider too far beyond the max value, resulting in the current slider being set backwards too far.
}else{
return false;
}
}
</script>
</body>
</html>关于javascript - 如何禁用 jRange slider 的点击？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46104346/