Question

我想使用html5 输入类型=范围，这样当用户滑动光标时它不应该在滑块上工作，而不是当用户直接点击条形图上的任何一点时。

<input type="range" id="myRange" value="90">

Answer 1

以下方法可能会让您：

在鼠标按下事件中缓存当前值和鼠标位置
在鼠标向上事件中，如果鼠标位置仍然相同（即单击），请重置该值。

类似的东西：

$(function () {
  var lastValue = null;
  var lastMousePos = null;
    $('#myRange').on('mousedown', function(e) {
      lastValue = e.target.value
      lastMousePos = [e.pageX, e.pageY]
    })
  $('#myRange').on('mouseup', function(e) {
      mousePos = [e.pageX, e.pageY]
      if(mousePos[0] == lastMousePos[0] && mousePos[1] == lastMousePos[1]) {
        $(e.target).val(lastValue)
      }
    })
})

以下是工作码本的链接：https://codepen.io/anon/pen/QqJmaw

我不建议更改默认行为，解决方案可能会出现视觉故障。如果您没问题，可以尝试解决方案。

- 在OP评论后编辑 -

如果你对视觉故障不好并准备做更多hacky东西（可能不是一个好主意），你可以使用辅助输入来隐藏故障。这是另一个示例实现，如果您注意到，仍然会有一个非常小的故障！：https://codepen.io/anon/pen/aLQjdp

自定义输入类型='范围'

1 个答案: