解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题


Posted in Javascript onJuly 24, 2020

功能描述:

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单。

BUG说明:

鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =》onmouseup =》onclick,意味着在click事件执行时会与与其相关的mouse事件冲突。

解决方案:

因为click事件执行时间短,所以利用鼠标拖动的时间差作为标志,在拖拽事件中计算鼠标从onmousedown 到onmouseup 所用的时间差,与200ms作比较,作为全局变量。由于vue的directives自定义指令中无法使用this,所以个人采用给元素设置属性的方式来解决全局变量的存储问题。

1、自定义上下拖拽指令

说明:指令中没有this关键字,指令中通过el可以直接拿到指令绑定的元素;

directives: {
   drag: {
    // 指令的定义
    bind: function (el) {
     let odiv = el; //获取当前元素
     let firstTime='',lastTime='';
     odiv.onmousedown = (e) => {
      document.getElementById('dragbtn').setAttribute('data-flag',false)
      firstTime = new Date().getTime();
      // 算出鼠标相对元素的位置
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {
       // 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
       let top = e.clientY - disY;
       // 页面范围内移动元素
       if (top > 0 && top < document.body.clientHeight - 48) {
        odiv.style.top = top + 'px';
       }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
        // onmouseup 时的时间,并计算差值
        lastTime = new Date().getTime();
        if( (lastTime - firstTime) < 200){
         document.getElementById('dragbtn').setAttribute('data-flag',true)
        }
      };
     };
    }
   }
  },

2、悬浮菜单点击事件中进行验证。

click(e) {
 // 验证是否为点击事件,是则继续执行click事件,否则不执行
    let isClick = document.getElementById('dragbtn').getAttribute('data-flag');
    if(isClick !== 'true') {
     return false
    }
    if (!localStorage.settings) {
     return this.$message.error('请选择必填项并保存');
    }
    if (this.right === -300) {
     this.right = 0;
     this.isMask = true;
    } else {
     this.right = -300;
     this.isMask = false;
    }
   },

补充知识:vue 子组件 created 方法不执行问题

近期做了一个项目 里面有一个树形菜单,将数据写在 js (死数据)中,所有的东西都能够正常执行(i 标签,子节点,父节点),但是当在请求接口文件或者请求后台数据的时候,发现引入的子组件的created方法不执行,但是点击父级菜单展开时还是能够触发,后来发现 是生命周期的问题,仔细查看一下,后来解决!

解决方法如下:

用watch 检测一下data的数据变化,created方法既然在点击的时候执行,所以也必须保留,好啦,就这样!

以上这篇解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery获得控件值的三种方法总结
Feb 13 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 #Javascript
JS实现简单移动端鼠标拖拽
Jul 23 #Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 #Javascript
JS实现鼠标按下拖拽效果
Jul 23 #Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 #Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 #Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 #Javascript
You might like
php smarty模版引擎中的缓存应用
2009/12/02 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
javascript模块化简单解析
2016/04/07 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python并行分布式框架Celery详解
2018/10/15 Python
python try 异常处理(史上最全)
2019/03/07 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python3实现二叉树的最大深度
2019/09/30 Python
python中if及if-else如何使用
2020/06/02 Python
python实现批量转换图片为黑白
2020/06/16 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
期末考试动员演讲稿
2014/01/10 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
幼儿园开学寄语
2014/04/03 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
升职自荐信范文
2015/03/27 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书