解决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;}},

参考：
1、基于Vue实现拖拽效果；
2、javascript事件, 解决mousedown和click冲突事件, 鼠标事件, 键盘事件, 文本事件用法简介；

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突相关推荐

基于Vue实现拖拽效果以及解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突
本人在开发中遇到实现一个基于vue的悬浮框拖动效果,经过努力研究最终实现了功能,一下是我的方法和部分代码,希望对您有所帮助,如有不对的地方还请指出.谢谢!下面步入正题: 首先展示一下功能的效果图: 要 ...
vue的移动app项目中，自定义拖拽指令的问题
使用vue的都知道vue有一个自定义指令,我比较喜欢的就是拖拽的自定义指令,感觉挺方便的! //组件内的拖拽指令 directives: {//组建内自定义指令drag: {// 指令的定义bind: ...
vue拖拽指令之offsetX、clientX、pageX、screenX
自己一直很想做个拖拽生成静态页面的东西,说简单也简单,这个东西按道理用jsx语法是最好的,用render方法渲染生成的json.只是自己对这块还是没信心.今天写个vue的拖拽指令,顺便理一下offse ...
Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了拖拽添加组件的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
Vue 实现拖拽模块(三)自定义拖拽组件的样式
上文介绍了自定义拖拽组件位置的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue 自定义拖拽组件的样式,具体 ...
form-create-desniger 自定义拖拽表单
Vue自定义拖拽表单(自定义组件及菜单) 引用今天我们学习一个非常厉害的组件,没错就是自定义拖拽表单formCreateDesigner 首先我们肯定要先npm下载引用啥的, 这里就不细说了链接: ...
vue实现PS效果，鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字（类似QQ截图输入文字）、vue图片上传转base64...
因为涵盖的小细节比较多,所以代码比较长,建议大家复制运行来进行对应功能查看,我在代码中添加了大量的注释,以供大家阅读代码最终效果部分细节 1.鼠标选点时可能会超出底图位置 2.图片的backgro ...
拖拽功能 php,基于Vue实现拖拽功能
这篇文章主要为大家详细介绍了Vue实现拖拽功能,拖动方块进行移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: ...
vue 实现文本的拖拽_基于Vue实现拖拽功能
本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: HTML代码: 位置 x:{{val.x}} y:{{val.y}} //注意这里要通过指令绑定函数将当前元素的位 ...

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突

功能描述：

BUG说明：

解决方案：

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突相关推荐

最新文章

热门文章