区分拖曳(drag)和点击(click)事件

假设页面上有一个a标签：

<a href="http://www.google.com">google</a>

现在需要对这个标签进行拖放操作，会发现当拖曳完成后，该链接也同时被打开了，这并不是期望的结果，因为我们仅仅想将这个标签拖放到另一个位置而已。

最初很自然地想到了用preventDefault来阻止默认行为，可实际操作后发现这种方案不可行。

由于拖曳需要监听三个事件：mousedown、mousemove、mouseup，而点击事件click则包含了mousedown和mouseup，如果阻止了默认的click操作，那么

拖曳也不能正常进行。解决这个问题的关键是区分鼠标是点击还是拖曳，下面是解决方案，为精简代码，用到了jQuery：

var a = $('a'),
      flag = 0;    //标记是拖曳还是点击

a.bind({
    mousedown:function(e) {
        flag = 0;
        //code...
    },
    mousemove:function(e) {
        flag = 1;
        //code...
    },
    mouseup:function(e) {
        if(flag === 0) {//点击
            a.unbind();
        } else if(flag === 1) {//拖曳
            a.bind('click',function(){
                return false; //阻止默认行为
            });
        }
        //code...
    }
});

通过一个flag变量来区分是点击还是拖曳操作，这样拖曳和点击链接就不冲突了。

转载于:https://www.cnblogs.com/undefined000/p/click-and-drag.html