引导数字输入微调器不会停止旋转答案

【问题标题】：Bootstrap number input spinner won't stop spinning引导数字输入微调器不会停止旋转
【发布时间】：2017-05-07 02:47:05
【问题描述】：

Demo on Bootsnipp

问题：

如果您在 + 或 - 上按住左键，然后单击鼠标右键，将鼠标从 + 或 - 按钮上移开并松开两次单击，“mouseup”功能将永远不会触发，它会保持加减数字，你无法停止。

想法？

提前致谢！

【问题讨论】：

标签： javascript twitter-bootstrap spinner

【解决方案1】：

下面代码中的解释：

$(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 上的间隔。

【讨论】：

【解决方案2】：

mouseup 事件只会在释放鼠标按钮时鼠标悬停在该元素上的元素触发。

您可以将处理程序添加到 document，然后从那里委托给子控件。

或者可以为 mouseout 添加另一个处理程序并清除该事件的间隔。

【讨论】：