Javascript 防止在输入范围html元素上发生mousedown事件，但仍允许用户拖动滑块

那么，有没有一种方法可以在输入范围元素上禁用鼠标向下和/或单击事件，但同时允许用户拖动滑块，并在更改事件时仍然触发

禁用在线上单击，但仍允许拖动滑块。 我想防止用户在滑块中间跳转（鼠标下移/点击），但我想让它们拖动它，从而改变值。

<input id="slider" name="slider" type="range" value="-1" min="-1" max="30" step="1" />

如果我调用

event.preventDefault（）不起作用，无法四处拖动。有办法吗

我正在尝试在html中重新创建此效果这种缩放是否有jQuery效果？
为什么不使用“鼠标点击”而不是“点击”

这就是你想要实现的吗？如果您愿意的话。：-）
 以下是我的尝试：

//First block control click + move event
var current_value = $("#slider").val();
$("#slider").on('mousedown', function(event) {
    $("#slider").on("mousemove", function (e) {
    if ($("#slider").val() == parseInt(current_value)+1
    || $("#slider").val() == parseInt(current_value)-1) {
      current_value = $(this).val();
    } else {
      $("#slider").val(current_value);
    }
    })
});

//Second block control click on line
$("#slider").on("mouseup", function() {
      if ($("#slider").val() == parseInt(current_value)+1
    || $("#slider").val() == parseInt(current_value)-1) {
      current_value = $(this).val();
    } else {
      $("#slider").val(current_value);
    }
})

注意：如果你移动到快速滑块，它会跳一步，然后回到初始位置

JSFiddle:
这里是一个纯CSS解决方案
您可以使用CSS控制范围的各个部分，并以这种方式禁用所有这些部分的指针事件，滑块的
拇指除外。这样，单击事件仅在单击滑块的按钮时注册

pointer-events: none;          // disable all event on the range

使用伪类选择器以thumb为目标，覆盖所有主要浏览器，如下所示

input[type=range]::-webkit-slider-thumb {   // support webkit (e.g. Chrome/Safari)
input[type=range]::-moz-range-thumb {       // support for Firefox
input[type=range]::-ms-thumb                // support for IE 

下面是它在实际中的表现


$（“#滑块”）.on（'mousedown'，函数（事件）{
log（'Mouse-down:仅在单击范围的拇指时激发）；
});
$（“#滑块”）.on（'mouseup'，函数（事件）{
log（'Mouse-up:仅在单击范围的拇指时激发）；
});
输入[类型=范围]{
指针事件：无；
}
输入[类型=范围]：-webkit滑块拇指{
指针事件：自动；
}
输入[类型=范围]：-moz范围拇指{
指针事件：自动；
}
输入[类型=范围]：-ms thumb{
指针事件：自动；
}

您可以使用CSS提供
输入的
拇指
指针事件：自动（允许鼠标事件），并提供其余范围的输入
指针事件：无（不允许鼠标事件）

见：


输入[类型=范围]{
指针事件：无；
}
输入[type=range]：-webkit滑块thumb{/*webkit浏览器，如Chrome和Safari*/
指针事件：自动；
}
输入[type=range]：-moz range thumb{/*Firefox*/
指针事件：自动；
}
输入[类型=范围]：-ms thumb{/*Internet Explorer*/
指针事件：自动；
}
您可以使用纯CSS

#slider {
    pointer-events: none;
}

我正在努力达到这个效果。请注意滑块是如何不可单击的。不能设置为数字，但可以拖动。在旁注中，这种缩放是否有jquery效果？这个例子不起作用，伙计。@belthazorNv是的，链接断了。但是只要想象一下一个
旋钮是可移动的，但是你不能通过点击旋钮外的滑块来移动它。我真的想弄清楚如何区分
mousedown
事件上的旋钮和滑块，以使拖动旋钮可以正确地使用另一种方法（）。啊，好的，我明白你想要什么。我不太确定是否可能，为什么不选择像jQuery UI这样的滑块呢？单击并更改正在工作-，禁用鼠标向下？您的意思是不在单击和更改时触发鼠标事件
input[type=range]::-webkit-slider-thumb {   // support webkit (e.g. Chrome/Safari)
input[type=range]::-moz-range-thumb {       // support for Firefox
input[type=range]::-ms-thumb                // support for IE 

#slider {
    pointer-events: none;
}