jQuery - イベントをドラッグしてクリックするタイミングを注文し、同じUI要素を共有する方法は？

Question

私は映画の水平スクロールを持っています。ユーザーはになります。要素を水平方向にスクロールし、をクリックすると、各ムービー上でがビデオプレーヤーを開きます。

問題は、ドラッグ＆クリックの両方が同じイベントリスナーに耳を傾ける、次のとおりです。（ドラッグするためとmouse move） mouse downmouse up

私はこれを達成したい：

を
1. ユーザーがムービーをすばやくクリックすると（マウスが1秒以内に上下に）、クリックと判断され、コールバがクリックされますckは発砲される。
2. ユーザーがドラッグすると（マウスを押し下げたまま1秒以上マウスを保持してからドラッグすると）、コールバックがキャンセルされ、ドラッグコールバックが発生します。

私のコード（怒鳴る）スクロールがこのように振る舞うなり、私はをたくない：

1. ユーザーがスクロールをドラッグし終わると、イベントは映画のオープンを作っ発射されるクリックしてください。

Htmlの

<ul class="scroll"> 
    <li><a href="linkToMovie"></a></li> 
    <li><a href="linkToMovie"></a></li> 
<ul> 

JS

var $scroll = (".scroll"); 
    var $movie = $scroll.children($("movie") 

    $scroll.on("mousedown", function(e) { 
     e.preventDefault() 
     $(this).on("mousemove", function() { 
      //drag horizontally 
     }); 
    }); 
    $scroll.on("mouseup", function(){ 
     //... 
    }); 

    $movie.on("click", function(){ 
     //open movie 
    }) 

Answer 1

このような何か：Dあなたはそれをマウスにフラグを設定し、設定を解除することができます

var drag = false; 
var hold = false; 

var $scroll = (".scroll"); 
var $movie = $scroll.children($("movie") 

$scroll.on("mousedown", function(e) { 
    e.preventDefault(); 
    hold = e.target; 
    $(this).on("mousemove", function() { 
     drag = true; 
    }); 
}); 

$(document).on("mouseup", function(e) { 
    if(!drag && $(hold).is(e.target)){ 
     //open movie 
    } 
    hold = false; 
    drag = false; 
});