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事件并不总是触发

回答

相关问题