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

痛定思痛。 2021-06-24 15:58 677阅读 0赞

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.");
    
      }
    
    }

代码摘自一篇博客，链接已忘记，侵权删。

发表评论取消回复

表情：

评论列表（有 0 条评论，677人围观）

还没有评论，来说两句吧...

相关阅读

相关对隐藏的内容添加点击事件

{ display: none; /\* 不占据空间，无法点击 \*/ \} \{ visibility: hidden; /\* 占据空间，无法点击 \*/ \} ...

怼烎@/ 2024年04月19日 11:16/ 0 赞/ 57 阅读

相关 JavaScript的对象属性和方法和点击事件

JavaScript的Event对象用来描述JavaScript事件，Event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。一旦事件发生，便会生成Eve

深藏阁楼爱情的钟/ 2024年04月06日 13:22/ 0 赞/ 70 阅读

相关 jquery点击事件(jquery触发点击事件onclick)

jquery实现远程http的get请求用哪个事件？jquery ![jquery点击事件][jquery] jquery实现远程http的get请求用哪个事件？jq

系统管理员/ 2023年09月26日 15:01/ 0 赞/ 192 阅读

相关 js点击事件(Js点击事件冲突怎么办)

JS点击onclick事件这个是闭包的问题 for (var i = 12; i <= 16; i++) \{ (function(i)\{ 第12个点击事

末蓝、/ 2023年09月26日 14:47/ 0 赞/ 187 阅读

相关数组点击事件对应下标阻止事件冒泡

for(var i=0;i<that.markerArr.length;i++){ (function(i){

青旅半醒/ 2023年07月19日 10:38/ 0 赞/ 21 阅读

相关 JavaScript 点击事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>点

逃离我推掉我的手/ 2022年07月13日 05:51/ 0 赞/ 296 阅读

相关点击事件

javascript教程 function displayDate()\{ document.getElementById("demo").inner

朴灿烈づ我的快乐病毒、/ 2022年06月08日 02:07/ 0 赞/ 349 阅读

相关 javascript能够对事件做出反应，比如：按钮点击

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

怼烎@/ 2022年05月18日 10:07/ 0 赞/ 231 阅读

相关 javaScript的点击事件的写法

参考：[https://blog.csdn.net/h5css3\_linhuai/article/details/56011582][https_blog.csdn.net_

ゝ一世哀愁。/ 2022年04月22日 04:48/ 0 赞/ 230 阅读

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

1.项目中，为了更好的服务用户，经常会设计一个便捷的通道，这个通道一般都是“悬浮”的。由于是悬浮的，那么就会考虑用户会出现哪几种可能的操作，一个是直接点击，另外一种就是在屏

痛定思痛。/ 2021年06月24日 15:58/ 0 赞/ 678 阅读