событие mouseup не всегда срабатывает

Question

У меня есть функция, которая позволяет мне что-то перетаскивать. Мои js:

$(function() { 
     $(svgcanv).css('cursor', '-moz-grab'); 

     var leftButtonDown = false; 
     $(document).mousedown(function(e){ 
      console.log('pressed'); 
      // Left mouse button was pressed, set flag 
      if(e.which === 1) leftButtonDown = 1; 
     }); 

     $(document).mouseup(function(e){ 
      console.log('released'); 
      // Left mouse button was released, clear flag 
      leftButtonDown = 0; 
      $(svgcanv).css('cursor', '-moz-grab'); 
      firstDragCanvas = 1; 
     }); 

     $(mainGroup).mousemove(function(e){ 
      if (leftButtonDown == 1) 
      { 
       $(svgcanv).css('cursor', '-moz-grabbing'); 
       var posX = e.pageX; 
       var posY = e.pageY; 
       if (firstDragCanvas == 0) 
       { 
        posX = e.pageX - canvasPosX; 
        posY = e.pageY - canvasPosY; 
       } 
       else 
       { 
        canvasPosX = e.pageX - translateX; 
        canvasPosY = e.pageY - translateY; 
        posX = translateX; 
        posY = translateY; 
        firstDragCanvas = 0; 
       } 

       if (posX > 0) 
        posX = 0; 

       if (posX < -canvasWidth + $("#holder").width()) 
        posX = -canvasWidth + $("#holder").width(); 

       translateX = posX; 
       translateY = posY; 

       mainGroup.setAttribute("transform","translate("+posX+","+posY+") scale("+currentZoomLevel+")");      
      } 
     });    
    }); 

Проблема в том, что событие mouseup не всегда срабатывает. Остальные 2 отлично работают. Первый раз, когда я двигаюсь, все работает нормально. Но во-вторых, если я нажимаю и ташу сразу, мышь не запускается. Если я перестаю перетаскивать, нажмите где-нибудь, а затем снова перетащите скрипт в режим работы снова.

Моей консоль (2 тащит, а затем нажмите затем перетащить снова обратите внимание на 2 последовательные "нажаты" строку - вход из MouseDown.):

И нет ... это SVG и нужно перетащить внутрь, поэтому нельзя использовать jQuery draggable.

Answer 1

Попробуйте добавить e.preventDefault(); в каждый метод для предотвращения любой активности UA по умолчанию.

E.g.

$(document).mousedown(function(e){ 
    e.preventDefault(); 
    console.log('pressed'); 
    // Left mouse button was pressed, set flag 
    if(e.which === 1) leftButtonDown = 1; 
}); 

и так далее ...