在以下代码中,我制作了一个带有两个滑块按钮的简单滑块,以读取范围和最小值。

并且我已经设置了滑块的最小值,以便用户不能将范围减小到最小值之下。

滑块工作有点正确!但是当用户达到最小范围限制时,用户将无法进一步减小范围,但应允许用户增大范围。

但是在达到最小范围后,当用户尝试增大范围时,光标会变为not-allowed,并且浏览器那时会停止读取任何类型的鼠标事件,此后,每次用户尝试增大范围时,都会发生这种情况,用户不再可以扩大范围。

有时这是无缘无故发生的?

玩了一段时间才能解决问题?

当用户在达到最小范围后尝试扩大范围时,为什么光标会变为not-allowed类型?

代码:https://jsfiddle.net/nyfv1ahe/



$(document).ready(function() {
  var a = 0,
    b = 0,
    timeoutId;
  $("#button1").mousedown(function() {
    clearTimeout(timeoutId);
    $(".slider").mousemove(function(event) {
      a = event.clientX - 25;
      if (($(".slider").width() - a - b) >= 130) {
        $(".slider").css("padding-left", a);
      }
    });
  });
  $("#button1").mouseup(function() {
    $(".slider").unbind("mousemove");
  });
  $("#button1").mouseout(function() {
    timeoutId = setTimeout(function() {
      $(".slider").unbind("mousemove");
    }, 500);
  });
  $("#button2").mousedown(function() {
    clearTimeout(timeoutId);
    $(".slider").mousemove(function(event) {
      b = $(".slider").width() - event.clientX - 25;
      if (($(".slider").width() - a - b) >= 130) {
        $(".slider").css("padding-right", b);
      }
    });
  });
  $("#button2").mouseup(function() {
    $(".slider").unbind("mousemove");
  });
  $("#button2").mouseout(function() {
    timeoutId = setTimeout(function() {
      $(".slider").unbind("mousemove");
    }, 500);
  });
});

.slider {
  max-width: 700px;
  height: 50px;
  background-color: #a0a0a0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.slider div {
  display: inline-block;
}

.button {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: red;
  z-index: 100;
}

#button1 {
  left: 25px;
}

#button2 {
  right: 50px;
}

.button:hover {
  cursor: pointer;
}

.range {
  flex-grow: 2;
  height: 50px;
  background-color: blue;
  margin: 0 -30px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<body>
  <div class="slider">
    <div class="button" id="button1"></div>
    <div class="range"></div>
    <div class="button" id="button2"></div>
  </div>
</body>





如果您从两个按钮中都删除了mouseout事件,那么它的工作原理是正确的,但是这样做的问题是,即使用户单击了按钮,有时按钮仍会粘在用户鼠标上!

最佳答案

https://javascript.info/mouse-drag-and-drop

   ball.ondragstart = function() {
      return false;
   };


然后一切都会好的))

10-05 20:39
查看更多