[英]Bootstrap number input spinner won't stop spinning
问题:
如果您按住+或-左键单击,然后单击鼠标右键,将鼠标移离+或-按钮并释放两次单击,则“ mouseup”功能将永远不会触发,并且会不断加减数字,您无法阻止它。
有什么想法吗?
提前致谢!
以下代码中的解释:
$(function() {
var action;
$(".number-spinner button").mousedown(function () {
btn = $(this);
input = btn.closest('.number-spinner').find('input');
btn.closest('.number-spinner').find('button').prop("disabled", false);
// You're creating a new interval on every mousedown (left and right click)
// You need to clear the previous interval to make this work.
clearInterval(action);
if (btn.attr('data-dir') == 'up') {
action = setInterval(function(){
if ( input.attr('max') === undefined || parseInt(input.val()) < parseInt(input.attr('max')) ) {
input.val(parseInt(input.val())+1);
}else{
btn.prop("disabled", true);
clearInterval(action);
}
}, 50);
} else {
action = setInterval(function(){
if ( input.attr('min') === undefined || parseInt(input.val()) > parseInt(input.attr('min')) ) {
input.val(parseInt(input.val())-1);
}else{
btn.prop("disabled", true);
clearInterval(action);
}
}, 50);
}
}).mouseup(function(){
clearInterval(action);
}).mouseout(() => {
// Added to stop spinning when mouse leaves the button
clearInterval(action);
});
});
总结 :
mousedown
上清除上一个间隔。 mouseout
的时间间隔。 仅当释放鼠标按钮时将鼠标悬停在该元素上时,该元素才会触发mouseup
事件。
您可以将处理程序添加到document
,然后从那里委托给子控件。
或者可以为mouseout
添加另一个处理程序并清除该事件的间隔。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.