區分拖曳(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變量來區分是點擊還是拖曳操作，這樣拖曳和點擊鏈接就不沖突了。