解决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类
Sep 08 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
vue如何进行动画的封装
Sep 26 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
jQuery实现动态操作table行
Nov 23 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做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
php 如何获取数组第一个值
2013/08/06 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
vue按需加载实例详解
2019/09/06 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python3基础之list列表实例解析
2014/08/13 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
TensorFlow实现创建分类器
2018/02/06 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
用Python配平化学方程式的方法
2019/07/20 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
农贸市场管理制度
2014/01/31 职场文书
教师专业自荐书范文
2014/02/10 职场文书
农村文化活动总结
2014/08/28 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
人力资源部岗位职责
2015/02/11 职场文书
通知格式
2015/04/27 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers