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

Question

那么，有没有一种方法可以在输入范围元素上禁用mousedown和/或click事件，但同时让用户拖动滑块并在change事件上仍然触发？

禁用在线点击，但仍然允许拖动滑块。我想要防止用户在滑块中间跳转（使用mousedown/click），但我想让他们拖动它，这样值就会改变。

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

这没有任何帮助，因为在更改范围时会被调用，并且会弄乱数字。

$slider.on('mousedown', function(event) {
    //event.preventDefault();
    this.value = -1;
    /* Act on the event */
    console.log("mousedown");
});
 $slider.on('click', function(event) {
    event.preventDefault();
    this.value = -1;
    /* Act on the event */
    console.log("click");
});

如果调用Event.PreventDefault()；mousedown滑块上的不起作用，也不能拖动。有没有办法绕过。

我正在尝试在html中重新创建这个效果，对于这种缩放，有没有jQuery效果？

Answer 1

您可以使用CSS控制范围的部分，并以这种方式禁用所有这些部分的指针事件，但滑块的thumb除外。这样，只有在点击滑块的按钮时才注册点击事件。

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 

这是它在行动中的样子。

null

$("#slider").on('mousedown', function(event) {
  console.log('Mouse-down: only fired when thumb of the range is clicked');
});
$("#slider").on('mouseup', function(event) {
  console.log('Mouse-up: only fired when thumb of the range is clicked');
});

input[type=range] {
  pointer-events: none;
}

input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
}

input[type=range]::-moz-range-thumb {
  pointer-events: auto;
}

input[type=range]::-ms-thumb {
  pointer-events: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="slider" name="slider" type="range" value="-1" min="-1" max="30" step="1" />

Answer 2

您可以使用CSS伪类给出inputpointer-events:auto的thumb（允许鼠标事件），并给出范围的其余部分输入pointer-events:none（不允许鼠标事件）。

pointer-events的文档说明：

pointer-events CSS属性指定在什么情况下（如果有的话）特定图形元素可以成为鼠标事件的目标。

如果未指定pointer-events属性，则该元素的行为与它相同。在SVG内容中，该值与visiblePainted值具有相同的效果。

元素永远不是鼠标事件的目标；但是，如果其后代元素的指针事件设置为其他值，则鼠标事件可能以这些后代元素为目标。在这些情况下，鼠标事件将在事件捕获/泡泡阶段期间，在前往/离开子元素的途中，根据需要触发该父元素上的事件侦听器。

null

input[type=range]{
  pointer-events: none;
}
input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chome and Safari*/
  pointer-events: auto;
}
input[type=range]::-moz-range-thumb{/*Firefox*/
  pointer-events: auto;
}
input[type=range]::-ms-thumb{/*Internet Explorer*/
  pointer-events: auto;
}

<input type="range" value="0" min="0" max="100"/>