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

项目是移动端的项目,为了解决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. Activiti6.0教程 Service用途剖析 (二)

    这节我们学习下Activiti的7大对象,首先我们从ProcessEngine接口开始看. /* Licensed under the Apache License, Version 2.0 (the ...

  2. Unix\Linux | 总结笔记 | 用户管理

    1. useradd [选项] 用户名   用于创建新的用户 useradd命令中的用户参数以及作用 参数 作用 -d 指定用户的家目录(默认为/home/username) -e 账户的到期时间,格 ...

  3. TIME-April

    一转眼四月份又过了三分之一,现在才开始计划自己的四月还真是对自己太过放松了呀!不过前一段时间都在搞学生会的五四评优答辩,索然不是我喜欢的过程,但是结果还比较令人欢喜.翻掉过去的篇章,展开新的一页. 四 ...

  4. synchronized(1)用法简介:修饰方法,修饰语句块

    注意: 同一个对象或方法在不同线程中才出现同步问题,不同对象在不同线程互相不干扰. synchronized方法有2种用法:修饰方法,修饰语句块 1.synchronized方法 是某个对象实例内,s ...

  5. javaweb-JSP action中附件下载的写法

     附件下载(包括图片,exl,word)在前台必须给出一个iframe 或者类似于window的窗口,另外,Java文件下载不能通过ajax进行请求,必须添加src属性首选,前台的链接拼接html如下 ...

  6. Android开发学习—— 消息机制

    ###主线程不能被阻塞* 在Android中,主线程被阻塞会导致应用不能刷新ui界面,不能响应用户操作,用户体验将非常差* 主线程阻塞时间过长,系统会抛出ANR异常* ANR:Application ...

  7. 直接插入排序法原理及其js实现

    直接插入排序法就像我们打扑克牌时整理牌面一样,先让我们脑补一下我们打牌的过程. 首先摸了一张6, 接着摸到一张4,比6小,插到6的前面: 又摸到一张7,比6大,插到6的后面: 又摸到一张5,比6小,比 ...

  8. jsp 访问文件夹中的图片,tomcat配置虚拟目录

    1.配置hosts文件 找到C:\Windows\System32\drivers\etc\hosts.txt 文件 添加127.0.0.1  www.image.com  在dos 命令中执行 pi ...

  9. 内存管理总结-autoreleasePool

    转自其他 序言 无论是在MRC时期还是ARC时期,做过开发的程序员都接触过autoreleasepool.尽管接触过但本人对它还不是很了解.本文只是将自己的理解说出来.在内存管理的文章中提到了OC的内 ...

  10. How do I get started with Node.js

    From: http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js Tutorials NodeSch ...