当前位置: 首页 > news >正文

vue(js)拖拽事件的drop失效

排查一个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监听这个事件后做骚操作

相关文章:

  • RFID技术,让书架智能化
  • Android 导出PDF PdfDocument
  • 《kaggle竞赛攻顶秘笈》 | 任务种类 | 任务评价指标 | 评价指标与目标函数 | 评价指标最佳化
  • 干货:秒懂redis集群
  • VNC 远程桌面很卡,替代方案如下
  • gitee 的使用
  • touchGFX控件学习四、scalableImage、flex button控件
  • Redis【缓存雪崩,缓存穿透,缓存击穿】详解
  • 【2022 年】 Python3 爬虫教程 - 爬虫是什么?
  • 长安链源码学习 vm-docker-go
  • 网课题库接口API—小白专用版本
  • STM32单片机的 Hard-Fault 硬件错误问题追踪与分析
  • 【精品】SpringBoot中整合Redis的简单封装及应用
  • C++ STL --- list的使用
  • 聚焦金融行业未来,博睿数据亮相第五届中国银行CIO峰会
  • [deviceone开发]-do_Webview的基本示例
  • angular2 简述
  • C# 免费离线人脸识别 2.0 Demo
  • JAVA SE 6 GC调优笔记
  • javascript从右向左截取指定位数字符的3种方法
  • JS 面试题总结
  • JS正则表达式精简教程(JavaScript RegExp 对象)
  • python 装饰器(一)
  • Redis 中的布隆过滤器
  • SpringBoot 实战 (三) | 配置文件详解
  • 阿里云Kubernetes容器服务上体验Knative
  • 猴子数据域名防封接口降低小说被封的风险
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • 解析 Webpack中import、require、按需加载的执行过程
  • 理清楚Vue的结构
  • 排序算法学习笔记
  • 实战:基于Spring Boot快速开发RESTful风格API接口
  • 使用docker-compose进行多节点部署
  • 想写好前端,先练好内功
  • 小程序开发中的那些坑
  • 异常机制详解
  • 湖北分布式智能数据采集方法有哪些?
  • 通过调用文摘列表API获取文摘
  • ​渐进式Web应用PWA的未来
  • #在线报价接单​再坚持一下 明天是真的周六.出现货 实单来谈
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • (Redis使用系列) Springboot 使用redis实现接口幂等性拦截 十一
  • (安全基本功)磁盘MBR,分区表,活动分区,引导扇区。。。详解与区别
  • (附源码)springboot 个人网页的网站 毕业设计031623
  • (附源码)springboot猪场管理系统 毕业设计 160901
  • (一)appium-desktop定位元素原理
  • (原創) 如何解决make kernel时『clock skew detected』的warning? (OS) (Linux)
  • (最全解法)输入一个整数,输出该数二进制表示中1的个数。
  • .NET Core MongoDB数据仓储和工作单元模式封装
  • .NET 解决重复提交问题
  • .NET6实现破解Modbus poll点表配置文件
  • .NET命名规范和开发约定
  • .NET中的Exception处理(C#)
  • @data注解_SpringBoot 使用WebSocket打造在线聊天室(基于注解)
  • [ element-ui:table ] 设置table中某些行数据禁止被选中,通过selectable 定义方法解决