So erkennen Sie einen Doppelklick-ziehen in Javascript/jQuery

Question

Ich möchte auf einer Webseite erkennen, wenn der Benutzer einen Text durch Ziehen auswählt. Es gibt jedoch ein Szenario in Windows, das ich als "Doppelklick-Ziehen" (Entschuldigung, wenn es schon einen besseren Namen gibt, den ich nicht kenne) und ich kann nicht herausfinden, wie man es erkennt. Es geht so:

1. Maustaste drücken
2. schnell Maustaste loslassen
3. schnell Maustaste wieder
4. ziehen Sie mit gedrückter Taste

Dies bewirkt, dass das Ziehen drücken auszuwählen ganze Wörter. Es ist eine ziemlich nützliche Technik aus der Benutzerperspektive.

Was ich versuche zu tun, ist den Unterschied zwischen einem Doppelklick-ziehen und einem Klick, gefolgt von einem separaten Ziehen zu erzählen. Wenn ich also zu Schritt 2 komme, bekomme ich ein Klick-Ereignis, aber ich möchte es nicht als einen Klick behandeln. Ich möchte sehen, ob sie sofort Schritt 3 tun.

Vermutlich Windows erkennt dies auf der Grundlage des Timings und wie viel die Maus zwischen Schritt 2 und 3 bewegt hat, aber ich kenne die Parameter nicht es verwendet, damit ich die Windows-Logik nicht replizieren kann. Beachten Sie, dass selbst wenn sich die Maus zwischen Schritt 2 und 3 überhaupt nicht bewegt, ich immer noch ein Mousemove-Ereignis erhalte.

Ich weiß, dass ich Schnittstellen entwickeln sollte, die berührungsfreundlich und geräteunabhängig sind, und ich habe die Absicht, andere Geräte zu unterstützen, aber dies ist eine Unternehmensanwendung für Benutzer auf Windows-PCs, also möchte ich dies optimieren Fall, wenn ich kann.

Answer 1

Wir haben etwas ähnliches getan. Unsere endgültige Lösung bestand darin, einen Click-Handler zu erstellen, der die Standardantwort unterdrückt und anschließend eine globale Variable auf das aktuelle Datum/die aktuelle Uhrzeit setzt. Wir haben dann eine andere Funktion in etwa 200ms ausgelöst, die das "Klick" -Ereignis behandeln würde. Das war unsere Grundfunktion.

Wir haben es dann geändert, um die globale Variable zu sehen, um festzustellen, wann der letzte Klick stattgefunden hat. Wenn es weniger als 200 ms war (modifiziere basierend auf deinen Bedürfnissen), haben wir ein Flag gesetzt, das dazu führen würde, dass der Click-Handler verpufft und einen Doppelklick-Handler aufgerufen hat.

Sie können diesen Ansatz erweitern, indem Sie die Drag-Funktionalität manuell mit Ihren Klick- und Doppelklick-Handlern auslösen lassen.

Ich habe keinen Zugriff auf den oben genannten Code im Moment, aber hier ist ein Beispiel für dieses Rahmens verwendete Tastatur zu verfolgen, um zu bestimmen klickt, wenn ein Scanner oder Benutzer der Eingabe in einem Feld beendet hat:

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

Hier ist ein Code, den ich gerade basierend auf den obigen Ideen geschrieben habe. Es ist nicht getestet und nicht die tatsächlichen Drag Ereignisse enthalten, aber Sie sollten einen guten Ausgangspunkt geben:

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 
    }