解決JavaScript拖動時觸發點擊事件的BUG

bug的緣由：

一個完整的click事件是包含

mousedown,mouseup

兩個事件的，而拖拽一個元素時，包含下面三個事件：

mousedown,mousemove,mouseup,

因此咱們在拖拽一個元素結束後，若是此元素上面綁定了點擊事件，
 就會同時觸發元素的點擊事件，用戶體驗度很差。

解決思路

仔細比較拖拽與點擊事件，發現拖拽事件多了一個mousemove，咱們能夠從這個mousemove入手，點擊事件
 時mousedown與mouseup觸發時鼠標沒有移動，而拖拽時鼠標移動了必定的距離，具體體如今px上。

解決辦法

能夠設定一個clickFlag變量，經過clickFlag來肯定mousedown與mouseup究竟是觸發了點擊事件仍是
 拖動事件：

mousedown時記錄下鼠標的位置x1，y1，mouseup時記錄下鼠標的位置x2,y2，

判斷兩次位置
 是否同樣或是相差小於一個定值（設爲7px）:

d = Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))

當d=0或是小於7時，便可認定用戶沒有拖拽。此時clickFlag爲true，能夠觸發點擊事件。