JS 区别拖拉事件与点击事件

在完成拖拉事件后，发现不能单纯用onclick来触发点击事件。拖拉的同时也就触发了点击。

故如何区分点击事件和拖动事件成为难题了。

继续变成菜鸟前端搬运工，找到了一篇有用的文章。附上链接：https://blog.youkuaiyun.com/Charles_Tian/article/details/79593241

上面也有详细的介绍，这里不多说了。直接上挂思路和实现代码：

思路:

1、先写出鼠标按下的函数；

2、编写对象是否被拖动的函数；

3、判断对象是否相对原先位置产生了位移；

4、编写鼠标松开之后的代码；

 

    <script>
        var timmerHandle = null;   //先设置一个定时器处理；
        var isDrag = false;             //声明拖动的默认状态是：否
         
        //创建目标被点击（鼠标按下）的函数
         
        function entranceDivDown (){
            console.log("mouse down.");
             isDrag = false;
             //延迟200ms
             timmerHandle = setTimeout(entranceDivUp,150);
        }
           
        function getPos(ev){
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  
            return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};     
        }
         
        var oDiv=document.getElementById('orange');
        var disX=0;
        var disY=0;
        //封装一个函数用于获取鼠标坐标
       
        oDiv.onmousedown = function(ev){
            entranceDivDown();
             var oEvent=ev||window.event;
              var pos=getPos(oEvent);  //这样就可以获取鼠标坐标，比如pos.x表示鼠标横坐标
              disX=pos.x-oDiv.offsetLeft;
              disY=pos.y-oDiv.offsetTop;
             
              document.onmousemove = function(ev){
                /*由于要防止鼠标滑动太快跑出div，这里应该用document.
                   因为触发onmousemove时要重新获取鼠标的坐标，不能使用父函数上的pos.x和pos.y，所以必须写var oEvent=ev||event;var pos=getPos(oEvent);*/
                var oEvent=ev||window.event;
                var pos=getPos(oEvent);
                //防止div跑出可视框
                var l=pos.x-disX;
                var t=pos.y-disY;
                if(l<0){
                    l=0;
                }
                else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
                    l=document.documentElement.clientWidth-oDiv.offsetWidth;
                }
                 if(t<0){
                    t=0;
                }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
                    t=document.documentElement.clientHeight-oDiv.offsetHeight;
                }
                oDiv.style.left=l+'px';
                oDiv.style.top=t+'px';
                isDrag = true;
            }
              document.onmouseup = function(ev){
                  document.onmousemove = null; //将move清除
                document.onmouseup = null;
           };
           return false;  //火狐的bug，要阻止默认事件
        }
         
        
        //创建目标鼠标释放的函数
         
        function entranceDivUp (){
            if (!isDrag){            //加入触发点击事件内容
            //先把doMouseDownTimmer清除，不然200毫秒后setGragTrue方法还是会被调用的
                clearTimeout(timmerHandle);
                 console.log("mouse up.");
               }else{                //加入触发拖动事件内容
                 console.log("draging over.");
                isDrag = false；

              }
        }

</script>