解决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动态添加删除select项(实现代码)
Sep 03 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
JS数组中对象去重操作示例
Jun 04 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自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
获取URL文件名后缀
2013/10/24 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
简单实现PHP留言板功能
2016/12/21 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python 读写中文json的实例详解
2017/10/29 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
基于python实现复制文件并重命名
2020/09/16 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
教师个人鉴定材料
2014/02/08 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
政风行风评议整改方案
2014/09/15 职场文书
校长四风对照检查材料
2014/09/27 职场文书
作风整顿剖析材料
2014/09/30 职场文书
典型事迹材料范文
2014/12/29 职场文书
大学生操行评语大全
2014/12/31 职场文书
婚礼父母致辞
2015/07/28 职场文书
运动会广播稿200字
2015/08/19 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle