在项目中全局添加FastClick导致图片上传插件在ios端失效的解决方案
---恢复内容开始---
项目是移动端的项目,为了解决300ms的click延迟,所以在全局中加入了FastClick,引入的方式很简单,网上一大堆教程,这里不做赘述
我们就谈,我遇到的问题:
某天产品要我新增一个上传图片的功能,这个也不是一个很困难的需求,直接使用插件,这里我使用的是element-ui的upload插件(对于要快速的上线的东西,不必重复造轮子)
很快速也很简单的完成了需求,然后测试的时候就jj了;经测试,在安卓端是没有任何问题的,可是在ios上,始终无法打开相册和拍照,第一反应是,因为element是一个pc端的ui库,难道是因为ui库做了什么骚操作???
这不科学,后来在一直点击毫无反应的ios端上传图片的按钮时,偶然间打开了一次相册,于是乎好像知道了点什么。。。难道是因为插件添加了位置的遮罩,导致点击不到input才无法触发响应的事件,审查dom元素,发现并没有呀?
一般我们在美化input[type="file"]时,都会使用display:none来隐藏原有丑丑的样式,在input上面盖上一层遮罩来美化原有样式,那么在我们不做任何处理的时候,移动端会有天然的点透问题,就是那种透过,那你肯定懂得,然后我就想到了
我在项目中添加了FastClick,于是乎恍然大悟,找到了原因,那就好办了,如果不能舍弃FastClick,那我们就在FastClick源码中屏蔽掉队指定元素的处理,下面是我的处理代码
在项目中全局添加FastClick导致图片上传插件在ios端失效的解决方案的更多相关文章
- 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)
最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...
- kindeditor在Java项目中的应用以及图片上传配置
在官网下载Kindededitor的开发包 在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中 ...
- React项目中使用wangeditor以及扩展上传附件菜单
在最近的工作中需要用到富文本编辑器,结合项目的UI样式以及业务需求,选择了wangEditor.另外在使用的过程中发现wangEditor只有上传图片和视频的功能,没有上传文本附件的功能,所以需要对其 ...
- 一个项目中哪些文件是要上传到 git上的,哪些是不必要的
- 在vue项目中使用element-ui的Upload上传组件
<el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadD ...
- Aps.net中基于bootstrapt图片上传插件的应用
Aps.net中基于bootstrapt图片上传插件的应用 在最近的项目中需要使用一个图片上传的功能,而且是多张图片同时上传到服务器的文件夹中,将图片路径存放在数据库中.为了外观好看使用了bootst ...
- 带进度条的文件批量上传插件uploadify
有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...
- 7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1. jQuer ...
- 7款js文件上传插件
1. jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby ...
随机推荐
- JQuery-Validate明明配置好了但是不生效?卡了2个小时的bug解决了,原因很简单。
JQuery Validate是表单验证的js工具,一般用于前台页面的校验,例如登陆和注册. 照着教程写了起来,使用Hbulider编辑器,本来写的时候可以用的,但是后来不知道怎么操作的,页面上的校验 ...
- 创建swagger的springboot-stater,并在spring cloud zuul网关中引入
Swagger 是一款RESTFUL接口的.基于YAML.JSON语言的文档在线自动生成.代码自动生成的工具. 通过在controller中添加注解,即可轻易实现代码文档化. Swagger提供ui界 ...
- Java知识点脑图
做服务器开发有十几年了,其中大部分用到的都是Java服务器开发,从JDK1.4到现在的JDK1.8,从基本的Java Application到 J2EE(JBOSS,Glassfish),OSGI,到 ...
- HttpSession讲解
1:session进行身份验证的原理: 当客户端第一次访问服务器的时候,此时客户端的请求中不携带任何标识给服务器,所以此时服务器无法找到与之对应的 session,所以会新建session对象,当服务 ...
- Java中关键字continue、break和return的区别
Java中关键字continue.break和return的区别: continue:跳出本次循环继续下一次循环 break: 跳出循环体,继续执行循环外的函数体 return: 跳出整个函数 ...
- [USACO 2012 Open Gold] Bookshelf【优化dp】
传送门1:http://www.usaco.org/index.php?page=viewproblem2&cpid=138 传送门2:http://www.lydsy.com/JudgeOn ...
- ZooKeeper通过ACL修复未授权访问漏洞
默认情况下ZooKeeper允许匿名访问,因此在安全漏洞扫描中暴漏未授权访问漏洞. 一.参考资料 <ZooKeeper 笔记(5) ACL(Access Control List)访问控制列表& ...
- Oracle查询使用空间比较大的前15个表
-- 查询使用空间比较大的前15个表 select a.* from( ,2) all_size from dba_segments where SEGMENT_TYPE='TABLE' order ...
- php 静态绑定
简介 编辑 后期静态绑定 从PHP 5.3.0开始,PHP增加了一个叫做后期静态绑定的功能,用于在继承范围内引用静态调用的类. 该功能从语言内部角度考虑被命名为”后期静态绑定“.”后期绑定“的意思是说 ...
- android开发学习——This support library should not use a different version
http://blog.csdn.net/mvpstevenlin/article/details/55209966 完美解决系列