如何檢測javascript/jQuery中的雙擊拖動

Question

我想在用戶通過拖動選擇某些文本時在網頁中檢測到。但是，在Windows中有一種情況叫做「雙擊 - 拖動」（對不起，如果已經有一個更好的名字我不知道），我無法弄清楚如何檢測它。它是這樣的：

1. 按鼠標按鈕
2. 迅速鬆開鼠標按鈕
3. 迅速按下鼠標左鍵再次
4. 阻力與按鈕按住

這導致拖動來選擇整個詞。從用戶的角度來看，這是一個非常有用的技術。

我想要做的是告訴之間的雙擊拖動和單擊後單獨的拖動區別。所以，當我到達第2步時，我會得到一個點擊事件，但我不想把它當作點擊;我想看看他們是否馬上要做第3步。

大概Windows會根據時間和鼠標在第2步和第3步之間移動了多少來檢測這一點，但我不知道參數它使用，所以我不能複製窗口的邏輯。請注意，即使鼠標在第2步和第3步之間完全不動，仍然會收到鼠標移動事件。我意識到我應該設計出觸控友好和設備中立的界面，並且我有意支持其他設備，但這是針對Windows PC用戶的企業應用程序，所以我想優化它如果我可以的話。

Answer 1

我們做了類似的事情。我們的最終解決方案是創建一個抑制默認響應的點擊處理程序，然後將全局變量設置爲當前日期/時間。然後，我們設置另一個功能，在大約200毫秒內觸發，以處理「點擊」事件。這是我們的基礎功能。

然後，我們修改它以查看全局變量以確定何時發生最後一次點擊。如果它小於200毫秒（根據您的需要修改），我們設置一個標誌，這會導致點擊處理程序失敗，並稱爲雙擊處理程序。

您可以通過讓點擊和雙擊處理程序手動觸發拖動功能來擴展該方法。

我沒有訪問上述代碼的權利，但在這裏是被用來追蹤鍵盤敲擊聲，以確定是否掃描儀或用戶在現場完成的打字該框架的一個例子：

var lastKeyPress = loadTime.getTime(); 

    // This function fires on each keypress while the cursor is in the field. It checks the field value for preceding and trailing asterisks, which 
    // denote use of a scanner. If these are found it cleans the input and clicks the add button. This function also watches for rapid entry of keyup events, which 
    // also would denote a scanner, possibly one that does not use asterisks as control characters. 
    function checkForScanKeypress() { 
     var iVal = document.getElementById('field_id').value; 

     var currentTime = new Date() 
     var temp  = currentTime.getTime(); 
     if (temp - lastKeyPress < 80) { 
      scanCountCheck = scanCountCheck + 1; 
     } else { 
      scanCountCheck = 0; 
     } 
     lastKeyPress = currentTime.getTime(); 
    } 


    // The script above tracks how many successive times two keyup events have occurred within 80 milliseconds of one another. The count is reset 
    // if any keypress occurs more than 80 milliseconds after the last (preventing false positives from manual entry). The script below runs 
    // every 200 milliseconds and looks to see if more than 3 keystrokes have occurred in such rapid succession. If so, it is assumed that a scanner 
    // was used for this entry. It then waits until at least 200 milliseconds after the last event and then triggers the next function. 
    // The 200ms buffer after the last keyup event insures the function is not called before the scanner completes part number entry. 
    function checkForScan() { 
     var currentTime = new Date(); 
     var temp  = currentTime.getTime(); 
     if (temp - lastKeyPress > 200 && scanCountCheck > 3) { 
      FiredWhenUserStopsTyping(); 
      scanCountCheck = 0; 
     } 
     setTimeout(checkForScan, 200); 
    } 

下面是我剛剛根據上述想法撰寫的一些代碼。這不是測試，並不包含實際的拖拽事件，但應該給你一個很好的起點：

var lastClick = loadTime.getTime(); 

    function fireOnClickEvent(event) { 
     event.preventDefault; 

     var currentTime = new Date() 
     var temp  = currentTime.getTime(); 
     if (temp - lastClick < 80) { 
      clearTimeout(tf); 
      doubleClickHandler(); 
     } else { 
      tf   = setTimeout(singleClickHandler, 100); 
     } 
     lastClick  = currentTime.getTime(); 
    } 

    function singleClickHandler() { 
     // Begin normal drag function 
    } 

    function doubleClickHandler() { 
     // Begin alternate drag function 
    }