我正在使用jRange滑块，该滑块接受隐藏的HTML输入并添加自定义滑块，并对其进行自定义，以便使用三个滑块，总价值不会超过100。我已经设法让所有工作都能正常进行点击和拖动，但只需单击滑块本身就可以使手柄移动到可接受的范围之外。我已经尝试了各种方法来禁用点击，但似乎没有任何效果。即
#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>
答案 0 :(得分：0)
jRange插件提供函数onbarclicked来监听单击滑块的时间。不幸的是，在滑块更新已经发生之后调用它，这对你的目的来说不是很有用。
看一下jRange源代码，如果我们可以覆盖插件的barClicked函数，那将是理想的选择。但是，不幸的是，通过使用闭包，这个功能已被私有化。
这使您无法直接编辑插件本身。我在下面添加了一个示例，其中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>