How to detect double click drag and drop in javascript / jQuery

Question

I would like to detect on a web page when a user selects any text by dragging it. However, there is one scenario in Windows that I call “double-click” (sorry if there is already a better name that I don’t know), and I can’t figure out how to find it. This happens as follows:

• click mouse button
• quickly release the mouse button
• quick click
• click and drag

This causes drag and drop to select whole words. This is a pretty useful method from a user perspective.

What I'm trying to do is the difference between double-clicking and dragging, and then separate dragging and dropping. Therefore, when I get to step 2, I will receive a click event, but I do not want to treat it as a click; I want them to take step 3 immediately.

Presumably, Windows detects this based on the time and degree of mouse movement between steps 2 and 3, but I do not know the parameters that it uses, so I can not replicate the Windows logic. note that even if the mouse does not move between steps 2 and 3, I still get the mousemove event.

I understand that I have to develop interfaces with a touch interface and neutral for devices, and I intend to support other devices, but this is an enterprise application designed for users on a Windows PC, so I want to optimize this case if I can.

Answer 1

We did something similar. Our final solution was to create a click handler that suppressed the default response and then set the global variable to the current date / time. Then we set another function to run for about 200 ms or so in order to handle the "click" event. This was our basic function.

Then we changed it to look at a global variable to determine when the last click occurred. If it is less than 200 ms (change it based on your needs), we will set a flag that will make the click handler work and the double-click handler will be called.

You can extend this approach if your clicks and double-click handlers manually launch drag and drop functions.

I don’t have access to the above code right now, but here is an example of this structure used to track keyboard clicks to determine if the scanner or user has finished entering text into the field:

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); } 

Here is the code I just wrote based on the above ideas. It has not been tested and does not contain real drag events, but should give you a good starting point:

  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 }