本篇教程介绍了如何解决JavaScript拖动时同时触发点击事件的BUG，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

<

在做在线地图项目的时候，在给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

     

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！