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 相关文章推荐
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 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连接MongoDB示例代码
2012/09/06 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
python中while循环语句用法简单实例
2015/05/07 Python
python使用opencv进行人脸识别
2017/04/07 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
Python实现最常见加密方式详解
2019/07/13 Python
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
老龄工作先进事迹
2014/08/15 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
Oracle 触发器trigger使用案例
2022/02/24 Oracle