解决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 相关文章推荐
javascript new一个对象的实质
Jan 07 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
详解如何在JS代码中消灭for循环
Dec 11 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
php5数字型字符串加解密代码
2008/04/24 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
python显示生日是星期几的方法
2015/05/27 Python
python实现多线程的两种方式
2016/05/22 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
python 输出所有大小写字母的方法
2019/01/02 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
妇产医师自荐信
2014/01/29 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
未婚证明书模板
2014/10/08 职场文书
庆六一开幕词
2015/01/29 职场文书
电工生产实习心得体会
2016/01/22 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
vue2实现provide inject传递响应式
2021/05/21 Vue.js
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL