这是一个纯CSS解决方案

Question

那么有没有办法在输入范围元素上禁用mousedown和/或click事件，但同时让用户拖动滑块并仍然触发更改事件？禁用点击线但仍然可以拖动滑块。我想阻止用户在滑块中间跳转（使用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 pseudos-classes来赋予thumb input中的pointer-events:auto（允许鼠标事件），并提供其余的范围输入pointer-events: none （不允许鼠标事件）。

pointer-events的{{3}}指出：

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

指针事件：自动

如果未指定指标事件属性，则该元素的行为将与原先的行为相同。在SVG内容中，此值和visiblePainted值具有相同的效果。

指针事件：无

该元素绝不是鼠标事件的目标；但是，如果鼠标后代的指针事件设置为其他值，则鼠标事件可能以其后代元素为目标。在这种情况下，鼠标事件将在事件捕获/冒泡阶段在到达/离开后代的适当方式触发此父元素上的事件侦听器。

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"/>

Answer 2

这是一个纯CSS解决方案

您可以使用CSS控制范围的各个部分，以这种方式禁用除滑块thumb以外的所有部分的指针事件。这样，单击事件仅在单击滑块的按钮时被注册。

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

使用伪类选择器定位到拇指并覆盖所有主要浏览器，例如

。

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").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" />

有关指针事件的更多信息，请参见MDN docs。

Answer 3

这是我的尝试：

//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：https://jsfiddle.net/xpvt214o/674502/

Answer 4

您可以使用纯CSS

#slider {
    pointer-events: none;
}

Answer 5

为什么不使用“ mouseup ”而不是“点击”？

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

这是你想要完成的吗？ Experiment with the fiddle如果你愿意的话。： - ）

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

5 个答案:

指针事件：自动

指针事件：无

这是一个纯CSS解决方案