移动端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 分 ...
随机推荐
- kafka多线程消费topic的问题
案例: topic:my-topic,分区:6 消费者:部署三台机器,每台机器上面开启6个线程消费. 消费结果:只有一台机器可以正常消费,另外两台机器直接输出六条告警日志: No broker par ...
- 更换bbr内核
1:首先yum update -y更新到最新CentOS 7.3 1611cat /etc/redhat-releaseCentOS Linux release 7.3.1611 (Core) 2: ...
- Microsoft Power BI Desktop概念学习系列之Microsoft Power BI Desktop的下载和安装(图文详解)
不多说,直接上干货! 官网 https://powerbi.microsoft.com/zh-cn/downloads/ 这里,一般用126邮箱. 因为对于163这样的邮箱是不行. 欢迎大家,加入我的 ...
- [中英对照]The Art Of Reporting Bugs | 报bug的艺术
前言:因为最近要给兄弟Team分享一下如何有效地报告bug, 故多做一做功课.下面给出一篇博客的中英文对照翻译. The Art Of Reporting Bugs | 报bug的艺术 My init ...
- ZOJ 2971 Give Me the Number
Give Me the Number Numbers in English are written down in the following way (only numbers less than ...
- HTTPS 使用成本
HTTPS 目前唯一的问题就是它还没有得到大规模应用,受到的关注和研究都比较少.至于使用成本和额外开销,完全不用太过担心. 一般来讲,使用 HTTPS 前大家可能会非常关注如下问题: 证书费用以及更新 ...
- Object的原型拷贝-create、assign、getPrototypeOf 方法的结合
一.实现原型拷贝 1.1.代码 tips:为了体现原型链,写了继承实现的代码,这部分可跳过- <script> /* 创建包含原型链的实验对象obj1-- start */ ...
- 微信小程序(二)框架的基本组成
安装好 微信web开发者工具后. 让我们来了解一下工具的框架,上图: 工具总共分为三个部分,左上角红框框: 模拟器:模拟手机小程序界面,模拟器左上角可以选择手机型号,右上角红框处,千万别选成Offic ...
- 使用NPOI,完成数据的导入导出
解释下流程,第一步:将数据库表中的数据导出到excel表 第二步:将excel表中的数据再插入到数据库表中(当然没有做重复性校验,测试而已)注:表结构 ...
- 设置placeholder的字体颜色
//设置字体颜色 [self.searchTextField setValue:[UIColor colorWithRed:0.50 green:0.50 blue:0.50 alpha:1.0] f ...