Javascript 单击范围元素与拖动它们时的不同步骤
我想指定单击范围元素的不同步骤。默认情况下，可以将滑块拖动到任何值，但只需单击即可达到特定值，例如“30”和“70”。如果用户单击范围轨迹上的任何值，他应该自动结束在“30”或“70”，这取决于他单击的位置（接近30或70）。有没有一种方法可以用HTML或Javascript实现类似的东西？我仅通过使用以下代码实现了类似的点击和拖动操作：Javascript 单击范围元素与拖动它们时的不同步骤,javascript,html,range,Javascript,Html,Range,我想指定单击范围元素的不同步骤。默认情况下，可以将滑块拖动到任何值，但只需单击即可达到特定值，例如“30”和“70”。如果用户单击范围轨迹上的任何值，他应该自动结束在“30”或“70”，这取决于他单击的位置（接近30或70）。有没有一种方法可以用HTML或Javascript实现类似的东西？我仅通过使用以下代码实现了类似的点击和拖动操作： <input id="slider" type="range" value="0" min="0" max="100" step="30">
<input id="slider" type="range" value="0" min="0" max="100" step="30">
感谢您的帮助 您可以使用事件处理程序来实现这一点。由于鼠标拖动和单击会发送一些相同的事件，您可以通过检查事件之间鼠标位置的变化来区分它们
<body>
<input id="slider" type="range" value="0" min="0" max="100"/>
</body>
<script>
// Keep track of coordinates on mouse down event
var x = 0, y = 0;
// Avoid adjusting value from slight mouse movement on click
var delta = 5;
function savePosition(e) {
x = e.pageX;
y = e.pageY;
};
function adjust(e) {
if (Math.abs(x - e.pageX) > delta || Math.abs(y - e.pageY) > delta) {
// Drag detected: Keep current value
return;
}
// Click detected
var newValue = 30;
if (e.target.value > 50) {
newValue = 70;
}
e.target.value = newValue;
};
var el = document.getElementById('slider');
el.addEventListener('mousedown', savePosition);
el.addEventListener('mouseup', adjust);
el.addEventListener('click', adjust);
el = undefined;
</script>
//跟踪鼠标按下事件的坐标
变量x=0，y=0；
//避免通过单击鼠标轻微移动来调整值
varδ=5；
函数保存位置（e）{
x=e.pageX；
y=e.pageY；
};
功能调整（e）{
if（Math.abs（x-e.pageX）>delta | | Math.abs（y-e.pageY）>delta）{
//检测到阻力：保持当前值
返回；
}
//点击检测
var-newValue=30；
如果（例如，目标值>50）{
新值=70；
}
e、 target.value=newValue；
};
var el=document.getElementById（'slider'）；
el.addEventListener（'mousedown'，savePosition）；
el.addEventListener（“鼠标”，调整）；
el.addEventListener（“点击”，调整）；
el=未定义；