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 相关文章推荐
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
JavaScript ES 模块的使用
Nov 12 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
escape unescape的php下的实现方法
2007/04/27 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
python语言使用技巧分享
2016/05/31 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
大学毕业生工作的自我评价
2013/10/01 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL