javascript - 防止在输入范围 html 元素上发生 mousedown 事件，并且仍然允许用户拖动 slider

Question

那么有没有办法在输入范围元素上禁用 mousedown 和/或 click 事件，但同时允许用户拖动 slider 并仍然触发更改事件？

禁止在线点击，但仍然允许拖动 slider 。 我想阻止用户在 slider 中间跳转(使用鼠标按下/单击)，但我想让他们拖动它以便值发生变化。

<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");
});

如果我在 mousedown slider 上调用 event.preventDefault(); 不起作用并且无法拖动。有没有办法解决这个问题。

我正在尝试在 html 中重新创建这种效果，这种缩放是否有任何 jQuery 效果？

Answer 1

您可以使用 CSS pseudos-classes给 input 的 thumb pointer-events:auto(允许鼠标事件)并给范围的其余部分输入 pointer -events: none(不允许鼠标事件)。

参见:pointer-events

input[type=range]{
  pointer-events: none;
}
input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chrome 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"/>