解决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 相关文章推荐
js操作table示例(个人心得)
Nov 29 Javascript
js中小数转换整数的方法
Jan 26 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
深入了解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
咖啡的传说和历史
2021/03/03 新手入门
example1.php
2006/10/09 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
各种快递查询--Api接口
2016/04/26 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
基于jquery的$.ajax async使用
2011/10/19 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
js时间戳转为日期格式的方法
2015/12/28 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
django 多数据库配置教程
2018/05/30 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python初步实现word2vec操作
2020/06/09 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
python 下载文件的几种方法汇总
2021/01/06 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
new修饰符是起什么作用
2015/06/28 面试题
网络专业学生个人的自我评价
2013/12/16 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
工作过失检讨书
2014/02/23 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
小区文明倡议书
2014/05/16 职场文书
2014年党务工作总结
2014/11/25 职场文书
廉洁自律个人总结
2015/02/14 职场文书
小学记事作文之200字
2019/08/06 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server