mousepressイベントの追跡方法は？

Question

私はドラッグ可能なバーがあり、それはうまく動作します。 https://jsfiddle.net/c2cqxcf8/2/ しかし、マウスを右の境界線までドラッグして、マウスの上にドラッグして、マウスの最も近いボタンを横切ってマウスのバーを越えてマウスを戻してみると、マウスの動きがわかりますmouseupイベントはunbinedではなく、何らかの理由でmousemoveが動作します。だから私はマウスが押されたときに追跡しようとしました、それはmousemoveを動作させる唯一のことですが、そのコードはこれまでのところ私の問題を解決しません。私はあなたの助けを頼りにしています。みんなマウスを押したときに検出する必要があり、その場合にのみmousemoveを動作させてバーを動かす必要があります。ありがとう！

これはJSで、上記のリンクで見ることができるドキュメント全体です。

var info; 
var dest; 
var result; 
var between = 0; 
var mouseDown = 0; 
$('.bar-button').on('mousedown', function(event){ 
    mouseDown = 1; 
    info = event.pageX; 
    if(mouseDown == 1) { 
     $(document).on('mousemove', function(e) { 
      dest = e.pageX - info + between; 
      if(dest >= 0 && dest <= 240) { 
       result = dest; 
      } 
      $('.bar-button').css('left', result + 'px'); 
     }) 
    } 
      $(document).on('mouseup', function(){ 
       mouseDown = 0; 
       $(document).unbind(); 
       between = result; 
      }) 
}) 

Answer 1

unbindedである私は一緒にあなたのマウスダウンではdragstart、ドラッグ、およびdragendイベントイベントを使用して検討するwoは、私は、他に追加、mousemoveおよびマウスアップもの。

私はあなたのコードにこれを追加しました：

$('.bar-button').on('dragstart', function(event){ 

    info = event.pageX; 

     $(document).on('drag', function(e) { 
      dest = e.pageX - info + between; 
      if(dest >= 0 && dest <= 240) { 
       result = dest; 
      } 
      $('.bar-button').css('left', result + 'px'); 
     }) 

      $(document).on('mouseup', function(){ 

       $(document).unbind(); 
       between = result; 
      }); 
    $(document).on('dragend', function(){ 

       $(document).unbind(); 
       between = result; 
      }); 
}); 

をあなたに私はここにあなたのフィドルhttps://jsfiddle.net/db5dLst2

をフォークしてきたアイデアを与えるためにそれがコンセプトの証明としていくつかの重複したコードが含まれていますが、それはうまくリファクタリングすることができますこれを回避する関数に変換します。

Answer 2

それはどういう意味ですか？

if(dest >= 0 && dest <= 240) { 
    result = dest; 
}else $(document).unbind('mousemove'); 

マウスがバーの外にあるとき、MouseMoveの通気孔が