排查一个BUG:

系统内文件拖拽至目标区域drop事件监听失效

排查过程:

本地写了个小demo,发现直接写drop事件是不可以的,需要这么改👇

在对应的div上加这两个事件的阻止默认动作

@dragenter.prevent
@dragover.prevent

demo加上好用后,大那是在项目中这么改并不好使,有点难受。所以这个解决方案的场景和我不同

大部分场景上面就可以解决了,下面是我自己在项目中遇到的问题以及解决过程!!!

其他原因尝试:

  • 怀疑dom遮挡,因为有个函数是通过监听dragenter添加了一层遮罩。对遮罩进行v-if=false。发现还是没用,那就再换一个思路。
  • 由于项目代码较多,目标div下有多个组件都是用了拖拽等事件,所以先把组件引用注释掉。在注释后发现还是没有解决
  • 代码版本回退至半年之前,拖拽上传是好用的,并且自身组件并没有改动

通过上面这三点了解到不是自身原因,和冲突等无关,那么只剩最后一个待排查的地方了
那就是项目文档的文件拖拽封装了一个js,代码较多需要简单阅读下

排查项目封装好的drag.js

发现有一个不对劲的地方:
在这里插入图片描述
殴嚯,怎么这里有一个window全局监听了dragover呢?
我直接赶忙去看这个方法里面写了什么
在这里插入图片描述

好家伙,方法中有一个判断执行 dropEffect=none

给不知道dropEffect的科普下:
如果dropEffect 属性设定为none,则不允许被拖放到目标元素 中
dropEffect详情

这个方法的注释写的和这个函数功能不太一致啊,注释写的是注销tips移入展示的,但是里面有dragover不在指定el会禁止拖放目标元素。我滴天,下次如果再排查这个事件 先看看有没有人在window.addevent中加骚操作

所以之后再他指定el中添加自己目标元素的el即可,这属于是加了个限制把我的功能给排除出去了,哭死 我还以为是什么别的高大上的原因

总结:

在项目中如果有事件不正常生效等,可以先看看有没有人对window监听这个事件后做骚操作

Logo

前往低代码交流专区

更多推荐