Javascript, klicken, doppelklicken und ziehen im selben Element

Question

Ich brauche eine Funktion, die herausfindet, ob der Benutzer klickt, doppelklickt oder die Maus zieht.

Da es passiert alles auf der gleichen Leinwand mit den normalen Ereignissen funktioniert nicht. Ich fand dies durch Google:

Es ist nicht ratsam Handler sowohl für den Klick zu binden und Ereignisse für das gleiche Element DBLCLICK. Die Reihenfolge der ausgelösten Ereignisse variiert zwischen vom Browser zum Browser. Einige empfangen nur zwei Klickereignisse und andere nur einen. Wenn eine Schnittstelle, die unterschiedlich auf einzelne und Doppelklicks reagiert, nicht vermieden werden kann, sollte das Ereignis dblclick im Click-Handler simuliert werden. Wir können dies erreichen, indem Sie im Handler einen Zeitstempel speichern und dann die aktuelle Zeit mit dem gespeicherten Zeitstempel bei nachfolgenden Klicks vergleichen. Wenn der Unterschied klein genug ist, können wir den Klick als einen Doppelklick behandeln.

Wie kann ich das auf eine gute Weise erreichen?

Zuerst sehen, ob der Klick gedrückt ist (zum Ziehen)? Wenn es veröffentlicht wird, behandle es als einen Klick? und dann, wenn erneut geklickt wird Doppelklick?

Wie kann ich das in Code übersetzen? Hilfe geschätzt.

Answer 1

So etwas wie die folgenden sollten Sie beginnen, ich bin mit jQuery nur zu zeigen, es einfacher zu machen, kann dies mit gerade JS umgesetzt werden, es ist nur eine Menge Lärm

$(function() { 

    var doubleClickThreshold = 50; //ms 
    var lastClick = 0; 
    var isDragging = false; 
    var isDoubleClick = false; 

    $node = ("#mycanvas"); 
    $node.click(function(){ 
    var thisClick = new Date().getTime(); 
    var isDoubleClick = thisClick - lastClick < doubleClickThreshold; 
    lastClick = thisClick; 
    }); 

    $node.mousedown(function() { 
    mouseIsDown = true; 
    }); 

    $node.mouseUp(function() { 
    isDragging = false; 
    mouseIsDown = false; 
    }); 

    // Using document so you can drag outside of the canvas, use $node 
    // if you cannot drag outside of the canvas 
    $(document).mousemove(function() { 
    if (mouseIsDown) { 
     isDragging = true; 
    } 
    }); 
}); 

Answer 2

Ich würde wahrscheinlich dies umgehen, indem Sie einen Timer in das Click-Ereignis setzen, um nach einem weiteren Klick zu suchen.

time = 0 
if(new Date().getTime() < time + 400) { 
    // Double click 
    throw new Error("Stop execution"); 
} 
if(!!time) 
    throw new Error("Stop execution"); 
time = new Date().getTime(); 
// Single click 

So ähnlich. Ungetestet, und ich kann momentan aus irgendeinem Grund nicht denken.