mousepress 이벤트를 추적하는 방법?

Question

나는 드래그 가능한 막대를 가지고 있으며 잘 작동합니다. https://jsfiddle.net/c2cqxcf8/2/ 그러나 마우스 오른쪽 버튼으로 드래그하여 바를 넘어 드래그하여 가장 가까운 버튼을 마우스로 건너 뛰고 바에서 마우스를 다시 가져온다면 우리는 mousemove 이벤트를 볼 수 있습니다. 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

내가 같은 dragstart, 드래그하고 mousedown와 이벤트 함께 dragend을 사용하는 것이 좋습니다 것 unbinded입니다 , mousemove 및 mouseup 것. 나는 그것은 개념의 증거로 일부 중복 된 코드가 포함되어 있지만 잘 리팩토링 할 수있다 여기 https://jsfiddle.net/db5dLst2

당신의 바이올린 갈래의 한

$('.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; 
      }); 
}); 

당신에게 아이디어를 제공하려면 :

나는 코드에 이것을 추가 이를 피하기 위해 함수에 넣습니다.

Answer 2

의미가 무엇입니까?

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

내가 마우스 막대를 벗어나면 우와, 다른 추가, MouseMove 이벤트 통풍구