fastclick插件 导致 input[type="date"] 无法触发问题解决方案
鄙人才疏学浅,新人一枚,不足之处还请谅解,写下这个也只是为了给大家分享一下我解决这个BUG的方法,也是自己的一个笔记。
首先,我们使用fastclick插件的初衷是解决“tap”事件“点透”的BUG;fastclick与tap都是利用“touch”事件来模拟“click”事件的;
然后我们来大致的了解一下fastclick的工作原理(来自网上的copy):
在我们的app中跟踪所有的TouchStart事件,在接收到touchend事件的时候,触发一个click事 件;
使用方法可找度娘;
但是问题来了,当使用了fastclick的时候,我们发现“日期”控件无法被触发了,是正常的点击时无法被触发,如果长按0.5S的样子还是可以触发的,但是问题还是已经存在,必须解决!
通过阅读fastclick的源码发现里面有个这个方法
/**
* On touch end, determine whether to send a click event at once.
*
* @param {Event} event
* @returns {boolean}
*/
FastClick.prototype.onTouchEnd = function(event) {
反正意思在上面也提到过,就是在接受到touchend事件的时候,触发一个click事件;
那么我的解决方法就是:
当touchend的时候我们判断一下他的event.target到底是啥,如果是date我们就不玩了,不要你fastclick了,用原生的去触发不就OK了,来个return false;
我的代码:
FastClick.prototype.onTouchEnd = function(event) {
/*加上这个*/
if(event.target.hasAttribute("type") && event.target.getAttribute("type") == "date"){
return false;
}
这里if里面的条件就随便写咯,自己根据项目需求而定,反正你要的是到达某个特殊的条件时给他退出就好了;
鄙人才疏学浅,新人一枚,不足之处还请谅解,写下这个也只是为了给大家分享一下我解决这个BUG的方法,也是自己的一个笔记。
!!转载还请确保是最新版本,谢谢
fastclick插件 导致 input[type="date"] 无法触发问题解决方案的更多相关文章
- HTML5中input[type='date']自定义样式
HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...
- 手机端input[type=date]的时候placeholder不起作用解决方案
目前PC端对input 的date类型支持不好,我试下来的结果是只有chrome支持.firefox.IE11 都不支持.而且PC端有很多日历控件可供使用.就不去多考虑这点了. 那么在移动端的话,io ...
- 关于<input type="date">这种取值的问题 【原创】
举例 <input type="date" id="date1"> var num = $("#date1").val(); a ...
- 手机端input[type=date]的placeholder不起作用
<div class="input clearfix"> <label class="fl">起始日期</label> &l ...
- input type date 解决移动端显示placeholder
在最近的一个项目中使用到了html5的一个新标签属性,type="date"时,发现placeholder属性失效无法使用. 如果是这样的效果,那么客户体验是可想而知的差了. 最后 ...
- (网页)HTML中INPUT type="date"标签如何赋值注意问题(转)
现在的html5 input标签支持type="date" 显示有日期的日历控件,一行简单的代码就能显示出一个日历控件,但是有的时候需要给它一个默认的日期值,这个时候可能就要用到v ...
- html5中如何去掉input type date默认
html5中如何去掉input type date默认样式 2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI:::-webkit-datetime-edit – ...
- input时间表单默认样式修改(input[type="date"])
一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...
- 在iPhone手机上写了input type="date" 显示不出来的原因
在iPhone手机上写了input type="date" 显示不出来的原因 今天在手机页面上使用新的input类型,这样子写,在chrome浏览器上浏览,很好,显示出来.然后用i ...
随机推荐
- 请谨慎使用 @weakify 和 @strongify
来源:酷酷的哀殿 链接:http://www.jianshu.com/p/d8035216b257 前言 相信大部分见过 @weakify 和 @strongify 的开发者都会喜欢上这两个宏.但是很 ...
- BootStrap2学习日记15----选项卡
导航格式1: <ul class="nav nav-tabs"> <li class="active"><a href=" ...
- c# checked unchecked 关键字
checked 和 unchecked关键字用来限定检查或者不检查数学运算溢出的:如果使用了checked发生数学运算溢出时会抛出OverflowException:如果使用了unchecked则不会 ...
- Linux下redis安装与使用
redis官网地址:http://www.redis.io/ 最新版本:2.8.3 在Linux下安装Redis非常简单,具体步骤如下(官网有说明): 1.下载 ...
- oracle数据库常用SQL语句
1)删除表的一列 ALTER TABLE 表名 DROP COLUMN 列名; 2)增加表的一列 且默认值为0 alter table 表名 add 字段名 类型 default '0'; 3)修改表 ...
- VirtualBox 导入.vdi文件时报“uuid is exists”错误
解决办法: 1.要安装的.vdi文件所在目录:D:\developTools\vm\RedHatLinux1.vdi 2.找到VirtualBox的安装目录,这里是D:\Program Files\O ...
- FVDI Commander products be replaced SVDI tools,really?
You may have heard that some FVDI Commander products are being replaced by the new SVDI tools. This ...
- vs2010 MFC Opengl实现
有的人说,学习要按部就班,学了几年的编程稍有点感悟,个人觉得面对技术的不断变化,以及需求的不断变更,如果按部就班的来搞,人生0.5的时间就浪费了,很多时候问自己,why I do need to le ...
- iOS菜鸟总结1
我从第一次接触OC,我觉得想要学好就必须有提前的知识的储备(比如c,java).这样就可更好了解面向对象的这一思想.学起来就不是很吃力了,本来OC就是比较难学的语言.工欲善其事,必先利其器,Xcode ...
- Picker组件封装
在开发APP的过程中,我们可能会遇上软件中需要有很多下拉选择样式,就像之前我做的那个<房贷计算器>一样,有很多下拉选择,如果没有将Picker封装起来共用是很麻烦的. 安装插件 在Reac ...