jQuery - Wie Timing von ziehen und klicken Ereignisse, teilen Sie die gleichen UI-Element?

Question

Ich habe eine horizontale Bildlauf von Filmen. Benutzer sollte in der Lage ziehen das Element horizontal scrollen sowie klicken Sie auf auf jeden Film, um einen Video-Player zu öffnen.

Das Problem ist, sowohl Ziehen und Klicken auf das gleiche Ereignis Zuhörer hören:

: mouse down mouse up (und mouse move zum Ziehen)

ich dies erreichen wollen

1. Wenn ein Benutzer schnell auf einen Film klickt (Maus innerhalb von 1 Sekunde), wird er als Klick- und Klick-Callba festgelegt ck wird gefeuert.
2. Wenn der Benutzer die Maus zieht (Maustaste gedrückt halten, dann länger als 1 Sekunde gedrückt halten, dann weiter ziehen), klicken Sie auf Callback wird abgebrochen und der Callback wird gezogen.

Mein Code (unten) macht die Scroll verhalten sich wie diese, , die ich nicht wollen:

1. Nach Benutzer gibt die Scroll-Ziehen, klicken Sie auf Ereignis ein Film geöffnet fired macht.

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

Etwas wie folgt aus:

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