在以下代码中,我制作了一个带有两个滑块按钮的简单滑块,以读取范围和最小值。
并且我已经设置了滑块的最小值,以便用户不能将范围减小到最小值之下。
滑块工作有点正确!但是当用户达到最小范围限制时,用户将无法进一步减小范围,但应允许用户增大范围。
但是在达到最小范围后,当用户尝试增大范围时,光标会变为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;
};
然后一切都会好的))