Как обнаружить перетаскивание с двойным щелчком в javascript/jQuery

Question

Я хотел бы обнаружить на веб-странице, когда пользователь выбирает какой-либо текст путем перетаскивания. Тем не менее, в Windows есть один сценарий, который я называю «двойным щелчком» (извините, если уже есть лучшее имя, которое я не знаю), и я не могу понять, как его обнаружить. Это выглядит следующим образом:

1. нажмите кнопку мыши
2. быстро отпустите кнопку мыши
3. быстро нажмите кнопку мыши еще раз
4. перетаскивание с нажатой кнопкой

Это приводит к затягиванию, чтобы выбрать целые слова. Это довольно полезный метод с точки зрения пользователя.

То, что я пытаюсь сделать, это указать разницу между двойным щелчком мыши и щелчком, а затем отдельным перетаскиванием. Поэтому, когда я дойду до шага 2, я получу событие щелчка, но я не хочу рассматривать его как клик; Я хочу посмотреть, не собирается ли они сразу сделать шаг 3.

Предположительно, Windows обнаруживает это на основе времени и степени перемещения мыши между шагами 2 и 3, но я не знаю параметров он использует, поэтому я не могу реплицировать логику Windows. обратите внимание, что даже если мышь не движется вообще между шагами 2 и 3, я все равно получаю событие mousemove.

Я понимаю, что я должен разрабатывать интерфейсы с сенсорным интерфейсом и нейтральными по отношению к устройствам, и я намерен поддерживать другие устройства, но это корпоративное приложение, предназначенное для пользователей на ПК с Windows, поэтому я хочу оптимизировать этот если возможно.

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 
    }