解决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 取时间差去掉周六周日实现代码
Dec 25 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 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
PHP 字符串分割和比较
2009/10/06 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
angular动态表单制作
2018/02/23 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
python实现计算倒数的方法
2015/07/11 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
员工评语范文
2014/12/31 职场文书
关于幸福的感言
2015/08/03 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js