专栏首页程序员的知识天地javascript对点击事件和拖动事件的区分
原创

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

这里推荐一下我的前端学习交流群:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习知识。自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript学习笔记

    【如果大家对程序员,web前端感兴趣,想要学习的,关注一下小编吧。加群:731771211。免费赠送web前端系统的学习资料!!前端学习必备公众号ID:mtbc...

    一墨编程学习
  • Python实力操作-网页正文转换语音文件

    天气真的是越来越冷啦,有时候我们想翻看网页新闻,但是又冷的不想把手拿出来,移动鼠标翻看。这时候,是不是特别想电脑像讲故事一样,给我们念出来呢?人生苦短,我有py...

    一墨编程学习
  • 百闻不如一码!手把手教你用Python搭一个Transformer

    与基于RNN的方法相比,Transformer 不需要循环,主要是由Attention 机制组成,因而可以充分利用python的高效线性代数函数库,大量节省训练...

    一墨编程学习
  • Redis学习笔记二

      学习Redis添加Object时,由于Redis只能存取字符串String,对于其它数据类型形容:Int,long,double,Date等不提供支持,因而...

    Gxjun
  • 高效Web开发的10个jQuery代码片段

    高效Web开发的10个jQuery代码片段 在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库。今天我们将为各位Web开发者提供10个最...

    牛嗷嗷
  • ABAP正则表达式 vs SPLIT INTO

    传统的做法见下图第98行的function module SKWF_UTIL_IO_FIND_BY_KEY:

    Jerry Wang
  • js逆向之mytoken热搜榜

    币圈的同学应该都听说过MyToken,其中最有价值的就是他的热搜榜。与其每天盯盘炒币,不如写一个脚本抓取它热搜榜数据。

    Python编程与实战
  • OkHttp源码深入解读

    目前在HTTP协议请求库中,OKHttp应当是非常火的,使用也非常的简单。网上有很多文章写了关于OkHttp的特点以及使用,而本章主要带领大家阅读OkHttp的...

    用户2929716
  • 使用自定义行为扩展 WCF

    Windows® Communication Foundation (WCF) 提供了许多扩展点,供开发人员自定义运行时行为,从而实现服务调度和客户代理调用。您...

    张善友
  • 原 荐 自己写JSON编辑器

    作者:汪娇娇 时间:2018年1月15日 下一篇:自己写代码对比工具 时间过得好快,一下子就2018年了,想起好久没写博客,不觉有些浪费了时光,今天便来补一篇。...

    jojo

扫码关注云+社区

领取腾讯云代金券