移动端tap事件的封装
/*封装tap*/
cc.tap = function(dom,callback){
/*
* 要求 没有触发 touchmove 事件
* 并且响应速度要比click快
*/
if(dom && typeof dom == 'object'){
var isMove = false;
var startTime = 0;
dom.addEventListener('touchstart',function(e){
//console.log('touchstart');
//console.time('tap');/*记录tap这个参数现在的时间*/
startTime = Date.now();
});
dom.addEventListener('touchmove',function(e){
//console.log('touchmove');
isMove = true;
});
dom.addEventListener('touchend',function(e){
//console.log('touchend');
//console.timeEnd('tap')/*打印tap这个参数距离上一次记录的时候的时间*/
/*判读 是否满足tap 的要求 一般要求tap的响应时间150*/
if(!isMove && (Date.now()-startTime) < 150){
/*调用 callback*/
callback && callback(e);
}
/*重置 参数*/
isMove = false;
startTime = 0;
});
}
}
这边进行封装的原因是click事件有一个延迟
移动端tap事件的封装的更多相关文章
- js移动端tap事件封装
这几天做项目,发现移动端需要触摸事件,而click肯定是不行的,于是我对tap事件封装进行了搜索,找到了一篇文章,原文地址如下:http://www.jb51.net/article/50663.ht ...
- 移动端tap事件(轻击、轻触)
一.问题 ①移动端也有click点击事件,click点击会延迟200~300ms ②因为点击的响应过慢,影响了用户体验,所以需要解决响应慢的问题 二.解决方案 ①使用tap事件:即轻击,轻敲,响应速度 ...
- 移动端tap事件,消除300毫秒延迟
引用这个之前,要讲一下首先我是用了webpack技术,所以你的项目如果没有用到这个的话,最好不要用这个技术,当然想用也可以,改下代码也可以用. 下面的代码直接复制就可以用啦. ( function(e ...
- 移动端WEB开发,click,touch,tap事件浅析
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
- 移动端为何不使用click而模拟tap事件及解决方案
移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...
- 移动端click延迟和tap事件
一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景 由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击 ...
- 移动端tap与click的区别 && 点透事件
移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...
- 10行代码搞定移动web端自定义tap事件
发发牢骚 移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过.我也不列外.一路走来被虐的不行,fastclick.touchend.iscroll什么的都用过, ...
- 移动端click时间、touch事件、tap事件
一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...
随机推荐
- Zynq-7000 FreeRTOS(二)中断:串口Uart中断
总结Zynq-7000器件的PS上的串口中断,为FreeRTOS中断实验做准备.
- 【运维】centos7+confluence5.6.6破解
一.安装mysql数据库 centos7自带mariadb数据库,因为无法下载完整安装包,最终选择将其完全卸载,然后全新安装mysql数据库 1.卸载mariadb rpm -qa | grep ma ...
- io流之转换流InputStreamReader、OutputStreamWriter
例子程序: package io; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.File ...
- SPSS学习系列之SPSS Statistics的菜单栏介绍(图文详解)
不多说,直接上干货! 以下是菜单栏 1.以下是文件栏: 2.以下是编辑栏 3.以下是查看栏 4.以下是数据栏: 5.以下是转换栏: 6.以下是分析栏: 7.以下是直销栏: 8.以下是图形栏: 9. ...
- 从svn检出项目的注意事项
提交到svn的时候,选择忽略.project,.settings,.classpath等文件,检出项目的时候就不能选择 [做为工作作为工作空间的项目检出].而应该选择做为新项目检出. 然后选择工程的类 ...
- python 脚本备份 mysql 数据库到 OSS
脚本如下: #!/usr/bin/python ########################################################### ################ ...
- Java reflect 反射 1
1 反射的概述 反射含义:可以获取正在运行的Java对象. JAVA反射机制是在运行状态中,对于任意一个类,都能够得到这个类的所有属性和方法; 对于任意一个对象,都能够调用它的任意一个方法; 这种动态 ...
- UVM_INFO
文件:src/ch3/section3.5/3.5.6/get/my_model.sv 21 function void my_model::build_phase(uvm_phase phase); ...
- [Mysql]——备份、还原、表的导入导出
备份 1. mysqldump mysqldump备份生成的是个文本文件,可以打开了解查看. Methods-1 备份单个数据库或其中的几个表# mysqldump -u username -p'pa ...
- [转]玩转Windows服务系列——命令行管理Windows服务
本文转自:http://www.cnblogs.com/hbccdf/p/managewindowsservicewithcmd.html 说到Windows服务的管理就不得不说通过命令行的方式管理W ...