---恢复内容开始---

项目是移动端的项目，为了解决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端失效的解决方案的更多相关文章

  1. 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)

    最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...

  2. kindeditor在Java项目中的应用以及图片上传配置

    在官网下载Kindededitor的开发包   在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中 ...

  3. React项目中使用wangeditor以及扩展上传附件菜单

    在最近的工作中需要用到富文本编辑器,结合项目的UI样式以及业务需求,选择了wangEditor.另外在使用的过程中发现wangEditor只有上传图片和视频的功能,没有上传文本附件的功能,所以需要对其 ...

  4. 一个项目中哪些文件是要上传到 git上的,哪些是不必要的

  5. 在vue项目中使用element-ui的Upload上传组件

    <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadD ...

  6. Aps.net中基于bootstrapt图片上传插件的应用

    Aps.net中基于bootstrapt图片上传插件的应用 在最近的项目中需要使用一个图片上传的功能,而且是多张图片同时上传到服务器的文件夹中,将图片路径存放在数据库中.为了外观好看使用了bootst ...

  7. 带进度条的文件批量上传插件uploadify

    有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...

  8. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  9. 7款js文件上传插件

    1.  jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby ...

随机推荐

  1. JavaScript 数组相关基础方法

    文章来源于:https://www.cnblogs.com/dolphinX/p/3353590.html 创建数组 构造函数 1.无参构造函数,创建一空数组 var a1=new Array(); ...

  2. bzoj 2257[Jsoi2009]瓶子和燃料 数论/裴蜀定理

    题目 Description jyy就一直想着尽快回地球,可惜他飞船的燃料不够了. 有一天他又去向火星人要燃料,这次火星人答应了,要jyy用飞船上的瓶子来换.jyy 的飞船上共有 N个瓶子(1< ...

  3. 结对测试vs随机测试

    在接口测试过程中,最关键的是对参数的各种情况进行测试. 随机测试是指随机选择一些参数值来测. 结对测试是指parewise算法生成较高"性价比"的组合情况来测. 随机测试存在的问题 ...

  4. Cunning Gena CodeForces - 417D

    Cunning Gena CodeForces - 417D 题意 先将小伙伴按需要的监视器数量排序.然后ans[i][j]表示前i个小伙伴完成j集合内题目所需最少钱.那么按顺序枚举小伙伴,用ans[ ...

  5. 转】用Hadoop构建电影推荐系统

    原博文出自于: http://blog.fens.me/hadoop-mapreduce-recommend/ 感谢! 用Hadoop构建电影推荐系统 Hadoop家族系列文章,主要介绍Hadoop家 ...

  6. 里氏替换原则中is和as分别的作用

    is 是用于检查对象是否指定类型兼容 if(empls[i] is SE){ ((SE)empls).SayHi(); } as 不用强转可以直接转换 if(empls[i] is SE){ SE s ...

  7. AJPFX解析关于编码ansi、GB2312、unicode与utf-8的区别

    大家平时遇到乱码问题是否有自己的一套解决方案?这篇文章就是介绍一下常用的编码方式关于编码ansi.GB2312.unicode与utf-8的区别 先做一个小小的试验: 在一个文件夹里,把一个txt文本 ...

  8. hihocoder offer收割编程练习赛10 C 区间价值

    思路: 令v[l, r](0<= l <= r < n)表示区间[l,r]的价值,则长度为n的区间的价值最少为0,最多为n*(n-1)/2.整体对价值二分,求能满足sum{v[l, ...

  9. python学习日记-01

    一. 熟悉 在正式介绍python之前,了解下面两个基本操作对后面的学习是有好处的: (1)基本的输入输出 可以在Python中使用+.-.*./直接进行四则运算. >>> 1+3* ...

  10. 两个自动配置IPv4

    今天一早过来发现网络连接不上了,ipconfig一下后,发现ip并不是我固定配置的ip地址,而是变成了一个完全不一样的ip,点击本地连接,点击详细信息,发现有两个自动配置IPv4,原因可能是ip地址冲 ...