javascript对点击事件和拖动事件的区分

1.项目中，为了更好的服务用户，经常会设计一个便捷的通道，这个通道一般都是“悬浮”的。

由于是悬浮的，那么就会考虑用户会出现哪几种可能的操作，一个是直接点击，另外一种就是在屏幕上先拖动几下，然后再点击。

那么为了完美的实现这个需求，那么该怎么办呢？

最重要的就是要区分点击事件和拖动事件。

我们都知道，点击事件是被点击的对象可看做是静止不动的，而拖动事件的对象很明显是移动的。

那么思路就应该是先判断事件对象是否有移动的现象，

但是由于不管是在点击事件和拖动事件，其都有一个鼠标按下的一个过程和一个松开的过程，只不过拖动事件多了一个拖动动作。

那么完整的思路应是这样的：

第一：先写出鼠标按下的函数；

第二：编写对象是否被拖动的函数；

第三：判断对象是否相对原先位置产生了位移；

第四：编写鼠标松开之后的代码；

完整代码如下：

var timmerHandle = null;   //先设置一个定时器处理；

var isDrag = false;             //声明拖动的默认状态是：否

//创建目标被点击（鼠标按下）的函数

function entranceDivDown (){

  console.log("mouse down.");

  isDrag = false;

  //延迟100ms

  timmerHandle = setTimeout(setDragTrue,200);

}

function setDragTrue (){

  isDrag = true;

}

//创建目标被拖动的函数

function entranceDivMove (){

  //可以使用isDrag来判断是移动还是拖动

  var entrance = document.getElementById("entrance");

  entrance.onmousedown = function(ev){

    var oevent = ev || event;

    var distanceX = oevent.clientX - entrance.offsetLeft;

    var distanceY = oevent.clientY - entrance.offsetTop;

    document.onmousemove = function(ev){

      var oevent = ev || event;

      entrance.style.left = oevent.clientX - distanceX + 'px';

      entrance.style.top = oevent.clientY - distanceY + 'px';

    };

    document.onmouseup = function(ev){

      document.onmousemove = null;

      document.onmouseup = null;

    };

  };

}

//创建目标鼠标释放的函数

function entranceDivUp (){

  if (!isDrag){

    //先把doMouseDownTimmer清除，不然200毫秒后setGragTrue方法还是会被调用的

    clearTimeout(timmerHandle);

    console.log("mouse up.");

    activity_id = sessionStorage.getItem('activity_id');    //获取活动id

    var url =  globalConfig.pre_api_url + "/wall/index.php?activity_id=" + activity_id;  //活动路径

    window.open(url);

  }else{

    isDrag = false;

    console.log("draging over.");

  }

}

感谢阅读

喜欢看小编文章的点个订阅或者喜欢！小编每天都会跟大家分享文章，也会给大家提供web前端学习资料。