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的表头固定的若干方法
Jan 27 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
详解javascript数组去重问题
Nov 06 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
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
星际争霸任务指南——人族
2020/03/04 星际争霸
PHP生成带有雪花背景的验证码
2006/10/09 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
php实现插入排序
2015/03/29 PHP
php实现简单爬虫的开发
2016/03/28 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
php中的依赖注入实例详解
2019/08/14 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
python获取网页状态码示例
2014/03/30 Python
Python定时任务sched模块用法示例
2018/07/16 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
俄语专业毕业生推荐信
2013/10/28 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
小学生优秀评语
2014/12/29 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS