/*封装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事件的封装的更多相关文章

  1. js移动端tap事件封装

    这几天做项目,发现移动端需要触摸事件,而click肯定是不行的,于是我对tap事件封装进行了搜索,找到了一篇文章,原文地址如下:http://www.jb51.net/article/50663.ht ...

  2. 移动端tap事件(轻击、轻触)

    一.问题 ①移动端也有click点击事件,click点击会延迟200~300ms ②因为点击的响应过慢,影响了用户体验,所以需要解决响应慢的问题 二.解决方案 ①使用tap事件:即轻击,轻敲,响应速度 ...

  3. 移动端tap事件,消除300毫秒延迟

    引用这个之前,要讲一下首先我是用了webpack技术,所以你的项目如果没有用到这个的话,最好不要用这个技术,当然想用也可以,改下代码也可以用. 下面的代码直接复制就可以用啦. ( function(e ...

  4. 移动端WEB开发,click,touch,tap事件浅析

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

  5. 移动端为何不使用click而模拟tap事件及解决方案

    移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...

  6. 移动端click延迟和tap事件

    一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景 由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击 ...

  7. 移动端tap与click的区别 && 点透事件

    移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...

  8. 10行代码搞定移动web端自定义tap事件

    发发牢骚 移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过.我也不列外.一路走来被虐的不行,fastclick.touchend.iscroll什么的都用过, ...

  9. 移动端click时间、touch事件、tap事件

    一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分 ...

随机推荐

  1. Jenkins 插件升级时跳过 update site 的签名验证

    当升级jenkins插件时,如果链接的update site用的自签名证书,可以用这个选项来启动Jenkins,来跳过签名验证:  -Dhudson.model.DownloadService.noS ...

  2. Django 登陆注册实现

    路由层 from django.conf.urls import url from django.contrib import admin from app01 import views urlpat ...

  3. FAQ of db2fmp messages in the db2diag.log

    http://www-01.ibm.com/support/docview.wss?uid=swg21470035 Technote (FAQ) Question What do these mess ...

  4. spring boot快速入门 5: 事务管理

    事务管理: 新增两名女生: 第一步:创建 GirlRespository package com.payease.service; import com.payease.entity.Girl; im ...

  5. iconfont的引入方法

    第一步:使用font-face声明字体@font-face {font-family: 'iconfont';src: url('iconfont.eot'); /* IE9*/src: url('i ...

  6. 【数组】word search

    题目: Given a 2D board and a word, find if the word exists in the grid. The word can be constructed fr ...

  7. javac符号名字的管理

    在符号表中,很重要的一项内容就是符号的名字.名字的管理,要解决的主要问题就是名字的变长问题.在javac中,所有的符号名字放到了一个公用字符池中,对于相同的名字只保存一个. 其中涉及到的主要类及关系如 ...

  8. Manjaro安装笔记

    安装后就可以先配置国内的软件源.使用以下命令: #排列源 sudo pacman-mirrors -g https://www.jianshu.com/p/f2c9ee00698c https://w ...

  9. oracle 数据库添加Java方法

    create or replace and compile java source named "Bitconverter" aspublic class Bitconverter ...

  10. Service , DAO ,DBUTtil;

    Service , DAO ,DBUTtil; util一般为基本的数据库操作:打开,关闭数据库连接,查询和更新操作. service 调用 dao 实现业务操作 dao层设计要为service服务, ...