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 相关文章推荐
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
JS画5角星方法介绍
Sep 17 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 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从FLV文件获取视频预览图的方法
2015/03/12 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
Python何时应该使用Lambda函数
2019/07/02 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
Django如何实现防止XSS攻击
2020/10/13 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
AOP的定义以及作用
2013/09/08 面试题
linux面试题参考答案(8)
2016/04/19 面试题
什么是Web Service?
2012/07/25 面试题
中标通知书
2015/04/17 职场文书
企业工会工作总结2015
2015/05/13 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python