fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决


Posted in Javascript onNovember 09, 2015

本文作为一名新手,写的不好地方还请各位大家多多指教,以下内容只是给大家共勉以下我的解决方案,也是我个人的一个见解,有不同意见不同解决方案的朋友还请多多分享自己的解决办法。

首先,我们使用fastclick插件的初衷是解决“tap”事件“点透”的BUG;fastclick与tap都是利用“touch”事件来模拟“click”事件的;

然后我们来大致的了解一下fastclick的工作原理(来自往上的copy):

在我们的app中跟踪所有的TouchStart事件,在接收到touchend事件的时候,触发一个click事 件;

使用方法可找度娘;

但是问题来了,当使用了fastclick的时候,我们发现“日期”控件无法被触发了,是正常的点击时无法被触发,如果长按0.5S的样子还是可以触发的,但是问题还是已经存在,必须解决!

通过阅读fastclick的源码发现里面有个这个方法

fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决

反正意思在上面也提到过,就是在接受到touchend事件的时候,触发一个click事件;

那么我的解决防范就是:

当touchend的时候我们判断一下他的event.target到底是啥,如果是date我们就不玩了,不要你fastclick了,用原生的去触发不就OK了,来个return false;

我的代码:

fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决

这里if里面的条件就随便写咯,自己根据项目需求而定,反正你要的是到达某个特殊的条件时给他退出就好了;

本文作为一名新手,写的不好地方还请各位大家多多指教,以下内容只是给大家共勉以下我的解决方案,也是我个人的一个见解,有不同意见不同解决方案的朋友还请多多分享自己的解决办法。谢谢大家能够关注本篇文章,有你们的支持我会做的更好。

Javascript 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 #Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 #Javascript
jquery实现简易的移动端验证表单
Nov 08 #Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 #Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 #Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 #Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 #Javascript
You might like
php笔记之:AOP的应用
2013/04/24 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
python创建文本文件的简单方法
2020/08/30 Python
python raise的基本使用
2020/09/10 Python
如何使用Pytorch搭建模型
2020/10/26 Python
Python 多进程原理及实现
2020/12/21 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
应届本科毕业生求职信
2014/07/23 职场文书
生物工程专业求职信
2014/09/03 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
会计专业自荐信范文
2019/05/22 职场文书