解决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 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python对文件操作知识汇总
2016/05/15 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
Python实现某论坛自动签到功能
2019/08/20 Python
python二维图制作的实例代码
2020/12/03 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
求职信写作要突出重点
2014/01/01 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
小露珠教学反思
2014/04/30 职场文书
校庆标语集锦
2014/06/25 职场文书
报效祖国演讲稿
2014/09/15 职场文书
幼儿园教师求职信
2015/03/20 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
详解Python requests模块
2021/06/21 Python