解决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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
精通JavaScript的this关键字
May 28 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
深入了解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
example1.php
2006/10/09 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
EM算法的python实现的方法步骤
2018/01/02 Python
django 修改server端口号的方法
2018/05/14 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Python类及获取对象属性方法解析
2020/06/15 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
Hibernate持久层技术
2013/12/16 面试题
初三化学教学反思
2014/01/23 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
2015年学校政教工作总结
2015/07/20 职场文书