如何檢測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被觸發時鼠標是否在移動？

回答

相關問題