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

项目是移动端的项目,为了解决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. mysql case 列名 when 和 case when的区别

    最近写了一个sql,才发现有些情况不能用case 列名 when ( and then and and 7.9 then '中' else '差' END ) score_type, 我发现这样写查出 ...

  2. mqtt遇到的问题锦集

    1.无效客户机标识 (2) Connect指令中的KeepAlive有效范围[60秒,300秒],否则会拒绝连接. 2.消息回调出现频繁的断开连接 待解决 3.长时间消息回调出现 已断开连接 (321 ...

  3. C# 基础知识和VS2010的小技巧总汇

    看了一些基础视频,才发现自己的基础比较薄弱,有很多基础知识都不知道.这里总汇一些基础知识. 1: foreach不仅可以作用于list类的索引集合,还可以遍历dictionary类,这一点比for更简 ...

  4. POJ 2002 Squares 数学 + 必须hash

    http://poj.org/problem?id=2002 只能说hash比二分快很多.随便一个hash函数都可以完爆二分. 判断是否存在正方形思路如下: 1.枚举任意两个点,作为正方形的一条边,那 ...

  5. React.js 简介

    React.js 是一个帮助你构建页面 UI 的库.如果你熟悉 MVC 概念的话,那么 React 的组件就相当于 MVC 里面的 View.如果你不熟悉也没关系,你可以简单地理解为,React.js ...

  6. iOS捷径(Workflow 2.0)拓展

    前言 iOS12 捷径(Workflow 2.0)入门 iOS12 捷径(Workflow 2.0)进阶 iOS12捷径(Workflow 2.0)实例大全 注:本文主要介绍如何获取URL Schem ...

  7. 解决::processDebugResourcesERROR: In<declare-styleable> FontFamilyFont编译报错

    cordova编译时报错 错误信息 :processDebugResourcesERROR: In <declare-styleable> FontFamilyFont, unable t ...

  8. APK瘦身-是时候给App进行减负了

    前言 APK瘦身即是对APK大小进行压缩策略,减小APK安装包大小,更小的安装包更有助于吸引用户安装.前一段时间我司某一App进行APK的瘦身,最终也达到了减小10M的目标,现做一个简单的总结记录. ...

  9. ASP.NET控件的ID,ClientID,UniqueId的区别

    一般情况下三者相同(没有父控件) ID:获取或设置分配给服务器控件的编程标识符.分配给控件的编程标识符. (可写) 设置服务器控件上的此属性可提供对服务器控件的属性.事件和方法的编程访问.Web 开发 ...

  10. .Net Core 真能令微软的.Net 跨平台“蔓延”?

    什么是.Net .Net 本身就是基于公共语言基础架构(CLI)实现的平台独立的公共语言开发平台,只是自2006年成为规范以来的CLI,只有Windows自己支持罢了(mono除外).微软的.Net ...