解决JavaScript拖动时同时触发点击事件的BUG

Posted 人在路途

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决JavaScript拖动时同时触发点击事件的BUG相关的知识,希望对你有一定的参考价值。

在做在线地图项目的时候,在给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,可以触发点击事件。
     

代码:
var x1,x2,y1,y2,dragFlag=false;
//maker的拖拽结束事件
marker.addEventListener("dragend",function(){
    var me=this;
    attribute(dragFlag,this)
});
marker.addEventListener("mousedown",function(e){
    x1=e.clientX;
    y1=e.clientY;
    console.log(x1+";"+y1);
});//mousedown记录鼠标位置1
marker.addEventListener("mouseup",function(e){
    x2=e.clientX;
    y2=e.clientY;
    console.log(x2+";"+y2);
    var _val=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
    console.log(_val);
    //判断
    if(_val>=0&&_val<=2){
        dragFlag=true;
    }else{
        dragFlag=false;
    }
    marker.removeEventListener("mousemove");
});//mouseup记录鼠标位置2
 注意:mouseup之后需要注销mousemove的事件,否则在其他的页面点击事件中也会触发拖动的move事件,累计触发
 
 

以上是关于解决JavaScript拖动时同时触发点击事件的BUG的主要内容,如果未能解决你的问题,请参考以下文章

防止拖动时触发点击事件[重复]

如何避免jQuery UI可拖动也触发点击事件[重复]

如何避免jQuery UI可拖动也触发点击事件[重复]

鼠标点击事件

React 中touch和click事件冲突

求助:android两个及以上控件点击事件同时监听响应如何实现