Javascriptをクリックし、同じ要素内でダブルクリックしてドラッグします

Question

私は、ユーザーがマウスをクリックしているかダブルクリックしているかを把握している機能が必要です。

通常のイベントを使用して同じキャンバスですべてが起こっているので、動作しません。私はグーグルを介してこれを見つけた：

両方のクリックにハンドラをバインドし、同じ要素について イベントをDBLCLICKすることはお勧めできません。トリガーされたイベントのシーケンスは、ブラウザーからブラウザーまで で、いくつかは2回のクリックイベントを受け取り、 以外は1つしかありません。単一の と異なる反応をするインターフェースを回避できない場合は、dblclickイベントをクリックハンドラ内でシミュレートした にする必要があります。 のタイムスタンプをハンドラに保存し、現在の時刻とその後のクリック時に保存されたタイムスタンプ を比較することで、これを実現できます。差が十分小さい場合は、クリックをダブルクリックとして扱うことができます。

どうすればいいですか？

最初にクリック（ドラッグ）が押されたかどうかを確認しますか？それがリリースされると、それをクリックとして扱いますか？クリックして再度ダブルクリックすると？

これをコードに変換するにはどうすればよいですか？ヘルプは高く評価しました。

Answer 1

何かあなたが始める必要があり、これはストレートJSで実装することができ、私はちょうどそれが簡単に表示するようにするためにはjQueryを使用している、それだけでノイズ

$(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

これを回避するには、clickイベントにタイマーを入れて別のクリックを確認することができます。

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 

何かがそうです。テストされていない、と私は今いくつかの奇妙な理由のために考えることができません。次のような