解决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，能够触发点击事件。