ブートストラップ番号入力スピナーは問題

Question

Demo on Bootsnipp

を回転停止されません。

あなたは+で左クリックを保持したりした場合 - 、右クリックは、離れて+からマウスを移動したり、 - ボタンを押して両方のクリックを離すと、 "mouseup"関数は決して起動せず、数値の加算または減算を続け、停止することはできません。

思考？

ありがとうございます！

Answer 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); 
    }); 
}); 

要約：

1. クリアmousedownに前の間隔。
2. mouseoutの間隔もクリアします。

Answer 2

mouseupイベントは、マウスボタンが離されたときにマウスがその要素の上にある場合、要素に対してのみ発生します。

documentにハンドラを追加してから、そこから子コントロールに委任できます。

mouseoutの別のハンドラを追加して、そのイベントの間隔をクリアすることもできます。以下のコードで