Question

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

我已经设置了滑块的最小值，这样用户就无法将范围缩小到超出最小限制。

滑块有点正确！但是当用户达到最小范围限制时，用户不能进一步减小范围，但应允许用户增加范围。

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

有时这种情况没有任何理由发生？

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

为什么当用户在达到最小范围后尝试增加范围时，光标会进入not-allowed类型？

$(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事件，那么它的工作方式有点正确，但问题是即使用户点击按钮后，按钮仍然会粘在用户鼠标上！

Answer 1

ADLADS（一天迟到，空缺一美元）
来自JQUERY How to disable not-allowed cursor while dragging?，
（用户“记住要发布解决方案”），添加

event.preventDefault();

移至鼠标移动功能。

Answer 2

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

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

然后一切都会好的））

光标变为不允许，浏览器停止读取鼠标事件？

2 个答案: