mouseup事件並不總是觸發

我有一個函數可以讓我拖動一些東西。我的js：mouseup事件並不總是觸發

$(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工作正常。我第一次移動東西時，一切正常。但第二，如果我按下並立即拖動鼠標將不會被觸發。如果我停止拖動，請點擊某處，然後再次拖動該腳本再次運行OK。

我的控制檯（2拖動，然後單擊然後再拖動注意到2個連續的「按下」琴絃 - 來自鼠標按下記錄。）：

enter image description here

而且沒有...這是一個SVG並需要在裏面拖動，所以不能使用jQuery可拖動。

來源

2012-02-23 zozo

嘗試添加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; 
});

等等...

來源

2012-02-23 10:22:14

只有一次是在事件發生之前需要。我在答案前2分鐘就想出了它:)。 – zozo 2012-02-23 10:38:05

mouseup事件並不總是觸發

回答

相關問題