jQuery - 如何排序拖动和单击事件的时间，共享相同的 UI 元素？

Question

我有一个水平滚动的电影。用户应该能够拖动元素以水平滚动以及单击每部电影以打开视频播放器。

问题是，拖动和点击都监听相同的事件监听器： mouse downmouse up（和mouse move用于拖动）

我想实现这个目标：

1. 当用户快速点击一部电影（1秒内上下鼠标），判断为点击并触发点击回调。
2. 当用户拖动时（鼠标向下，然后按住鼠标超过 1 秒，然后继续拖动），点击回调被取消并触发拖动回调。

我的代码（如下）使滚动行为像这样，我不想要：

1. 用户完成滚动滚动后，会触发 click 事件以打开电影。

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

类似这样的：

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