如何检测mouseup被触发时鼠标是否在移动？

我试图通过拖动实现页面panorate。在我的实现中，在用户释放鼠标按钮后，页面会移动一段时间，例如在Google地图中拖动地图。现在我想避免这种效果，当用户释放按钮时鼠标不再移动。问题是，我只是无法弄清楚在触发事件时鼠标是否真的移动。如何检测mouseup被触发时鼠标是否在移动？

现在我试图通过计算拖动速度来解决这个问题，然后将速度与预先设定的“灵敏度”进行比较，该灵敏度在大多数情况下都有效，但有时会失败。

简化示例jsFiddle。当用小提琴演奏时，请使用FF中的中键，可拖动的div“粘”到左按钮。

伪代码：

AniMove = function (doc, element, sensitivity, panspeed, duration) { 
    var mouseDown = function (e) { 
      sTime = new Date(); 
      originalX = mouseX = e.clientX; 
      originalY = mouseY = e.clientY; 
      /* addEventListeners mousemove & mouseup for document */ 
      return; 
     }, 
     mouseMove = function (e) { 
      /* Setting new position for #square + new mouseX & Y */ 
      return; 
     }, 
     mouseUp = function() { 
      var dc = 1; 
       /* removeEventListeners mousemove & mouseup */ 
       eTime = new Date(); 
       vX = Math.round((50 * panspeed) * (originalX - mouseX)/(eTime - sTime)); 
       vY = Math.round((50 * panspeed) * (originalY - mouseY)/(eTime - sTime)); 

      // Check whether mouse is moving or not, 
      // now checking the speed against sensitivity, which is not reliable 

       if (Math.abs(vX) < sensitivity){vX = 0;} 
       if (Math.abs(vY) < sensitivity){vY = 0;} 

       for (n = 0; n < dur; n++, dc += 0.001) { 
        vX = Math.round(vX * dec/dc); 
        vY = Math.round(vY * dec/dc); 
        delay[n] = setTimeout(endDrag(n, vX, vY), n * 50); 
       } 
       return; 
      }, 
      endDrag = function (n, vX, vY) { 
       /* Setting new position for #square */ 
       return; 
      }, 
      dec = 1 - 120/duration; 
    panspeed *= -0.01; 
    duration /= 50; 
    element.addEventListener('mousedown', mouseDown, false);  
} 
drag = new AniMove(document, document.getElementById('square'), 20, 100, 500);

那么，它甚至有可能，如果鼠标在这种情况下移动或不检测？也许我需要一个不同的方法来完成这项任务？

来源

2012-08-29 Teemu

一个想法是，在mouseUp（设置定时器）之后，保持mouseMove监听器在0.5秒内活动，如果鼠标已经移动了0.5秒（即，鼠标位置与mouseUp不同），则假设有动作和动画。

你可能需要玩0.5秒，看看什么给最好的感觉。

来源

2012-08-29 10:09:23 Ariel

谢谢，现在它工作！想到10毫秒的伎俩。工作小提琴：http://jsfiddle.net/cww55/7/ – Teemu

你想让视图继续移动并逐渐停止，对吧？

所有你需要做的是记录它在MouseUp事件之前移动得有多快，然后以大约半秒左右的增量速度降低速度。如果按钮没有关闭，鼠标是否继续移动应该是无关紧要的。

一旦你“放开了球”，它滚动的速度与你的手下一步没有任何关系。

因此，您需要在按钮关闭时跟踪鼠标速度，然后在按钮启动后只是“淡出”。

在你的情况下，如果鼠标在释放按钮时没有移动，比喻是用户“握住球”。所以它应该立即停止。

所以你不需要做任何特殊的事情来处理这种情况。如果用户按下按钮停止鼠标，请停止平移。

来源

2012-08-29 09:55:06 Ben

正确，但只有当鼠标仍在移动时释放鼠标按钮。如果在释放按钮之前鼠标已经停止，我想防止逐渐停止，并且有一个正常的panorate。 – Teemu

所以只需处理MouseMove事件。记住当前和以前的时间和位置。当鼠标按钮被释放时，这给你指针的速度。你不需要知道或关心接下来会发生什么。 – Ben

如何检测mouseup被触发时鼠标是否在移动？

回答

相关问题