在做在線地圖項目的時候，在給marker點綁定事件時，因為有點擊事件click，同時又存在拖動dragEnd事件，首先沒有重大缺陷，就是在用戶在點擊的時候，有時候本想是點擊，但是他觸發了drag的事件，造成不好的用戶體驗

bug的原因

一個完整的click事件是包含   mousedown,mouseup
兩個事件的，而拖拽一個元素時，包含下面三個事件：
mousedown,mousemove,mouseup,
所以我們在拖拽一個元素結束後，如果此元素上面綁定了點擊事件，
 就會同時觸發元素的點擊事件，或者用戶只是想觸發點擊事件，但是又同時出發了drag事件，用戶體驗度不好。

解決思路

仔細比較拖拽與點擊事件，發現拖拽事件多了一個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，可以觸發點擊事件。
     

代碼：

 1         var x1,x2,y1,y2,dragFlag=false;
 2         //maker的拖拽結束事件
 3         marker.addEventListener("dragend",function(){
 4             var me=this;
 5             attribute(dragFlag,this)
 6         });
 7         marker.addEventListener("mousedown",function
 
(e){
 8             x1=e.clientX;
 9             y1=e.clientY;
10             console.log(x1+";"+y1);
11         });//mousedown記錄鼠標位置1
12         marker.addEventListener("mouseup",function(e){
13             x2=e.clientX;
14             y2=e.clientY;
15             console.log(x2+";"+y2);
16             var _val=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
17             console.log(_val);
18             //判斷
19             if(_val>=0&&_val<=2){
20                 dragFlag=true;
21             }else{
22                 dragFlag=false;
23             }
24         });//mouseup記錄鼠標位置2

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