点击事件延迟问题所在:

在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待300ms,看用户是否会进行第二次点击,如果没有的话,才会执行点击事件

为什么要解决:

随着h5游戏,移动端网页的流行,用户对web网页的性能也随着提高,点击事件的延迟会影响用户体验,尤其是在游戏中,这是个大忌.

这是因为这个问题的存在,所以出现了tap事件,tap事件对应的是在移动端中的.

tap事件的原理:

tap事件的原理其实是源于触摸touch事件,在移动触摸事件就是在同个点触发,及touchmove的距离距离touchstar的距离为0,并且点击的时间不超过某个设定的时间值,超过该时间值的话,就属于长按了

下面我封装了一个事件,模拟tap事件的原理:

    //封装tap的方法
function tap(ele,callBack){
//触摸开始的时间
var startTime=0;
//定义touchmove是否触发
var ismove=false;
var maxTime=250;
ele.addEventListener('touchstart',function(e){
startTime=Date.now();
ismove=false;
})
ele.addEventListener('touchmove',function(e){
//触发就赋值为true
ismove=true;
})
ele.addEventListener('touchend',function(e){
//判断是否是touchmove是否触发
if (ismove) {
return;
}
// 判断是否为长按
if ((Date.now()-startTime)>maxTime) {
return;
} // 如果能够到这里
callBack(e);
}) }

tap事件的原理详解的更多相关文章

  1. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  2. IOS 触摸事件分发机制详解

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:MelonTeam 前言 很多时候大家都不关心IOS触摸事件的分发机制的实现原理,当遇到以下几种情形的时候你很可能抓破头皮都找不到解决方案 ...

  3. C#事件与委托详解

    from https://www.cnblogs.com/sjqq/p/6917497.html C#事件与委托详解[精华 多看看] Delegatedelegate是C#中的一种类型,它实际上是一个 ...

  4. Namenode HA原理详解(脑裂)

    转自:http://blog.csdn.net/tantexian/article/details/40109331 Namenode HA原理详解 社区hadoop2.2.0 release版本开始 ...

  5. Android 的事件传递机制,详解

    Android 的事件传递机制,详解 前两天和一个朋友聊天的时候.然后说到事件传递机制.然后让我说的时候,忽然发现说的不是非常清楚,事实上Android 的事件传递机制也是知道一些,可是感觉自己知道的 ...

  6. Java网络编程和NIO详解6:Linux epoll实现原理详解

    Java网络编程和NIO详解6:Linux epoll实现原理详解 本系列文章首发于我的个人博客:https://h2pl.github.io/ 欢迎阅览我的CSDN专栏:Java网络编程和NIO h ...

  7. 通过 JFR 与日志深入探索 JVM - TLAB 原理详解

    全系列目录:通过 JFR 与日志深入探索 JVM - 总览篇 什么是 TLAB? TLAB(Thread Local Allocation Buffer)线程本地分配缓存区,这是一个线程专用的内存分配 ...

  8. select用法&原理详解(源码剖析)(转)

    今天遇到了在select()前后fd_set的变化问题,查了好久终于找到一个有用的帖子了,很赞,很详细!!原文链接如下: select用法&原理详解(源码剖析) 我的问题是: 如下图示:在se ...

  9. epoll原理详解及epoll反应堆模型

    本文转载自epoll原理详解及epoll反应堆模型 导语 设想一个场景:有100万用户同时与一个进程保持着TCP连接,而每一时刻只有几十个或几百个TCP连接是活跃的(接收TCP包),也就是说在每一时刻 ...

随机推荐

  1. 使用Node.js 搭建http服务器 http-server 模块

    1. 安装 http-server 模块 npm install http-server -g   全局安装 2.在需要的文件夹   启动 http-server  默认的端口是8080    可以使 ...

  2. Python数据挖掘学习路程--起步

    一.首先第一步我去了解了Python开发环境:Python(程序运行基础的解释器)+第三方类库(功能扩展)+编辑器(提高代码编辑效率) 编辑器有:Pycharm.Spyder.jupyter note ...

  3. 03_Java基础语法_第3天(Scanner、Random、流程控制语句)_讲义

    今日内容介绍 1.引用类型变量的创建及使用 2.流程控制语句之选择语句 3.流程控制语句之循环语句 4.循环高级 01创建引用类型变量公式 * A: 创建引用类型变量公式 * a: 我们要学的Scan ...

  4. 经典SQL语句基础50题

    很全面的sql语句大全.都是很基础性的,今天特意整理了下.大家互相学习.大家有好的都可以分享出来,  分享也是一种快乐. --创建数据库 create database SQL50 --打开SQL50 ...

  5. 使用RStudio学习一个简单神经网络

    数据准备 1.收集数据 UC Irvine Machine Learning Repository-Concrete Compressive Strength Data Set 把下载到的Concre ...

  6. jQuery之css

    设置css样式/读取css值 css() 1. 得到第一个p标签的颜色 2. 设置所有p标签的文本颜色为red 3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高 ...

  7. C++11 锁 lock

    转自:https://www.cnblogs.com/diegodu/p/7099300.html 互斥(Mutex: Mutual Exclusion) 下面的代码中两个线程连续的往int_set中 ...

  8. linux php 访问sql server设置

    1.安装freeTDS wget ftp://ftp.freetds.org/pub/freetds/stable/freetds-stable.tgz 1.1.进入到你下载的目录然后解压.tar - ...

  9. Spring 中常用注解原理剖析

    前言 Spring 框架核心组件之一是 IOC,IOC 则管理 Bean 的创建和 Bean 之间的依赖注入,对于 Bean 的创建可以通过在 XML 里面使用 <bean/> 标签来配置 ...

  10. MVC 中创建自己的异常处理

    1.新建类一个类继承 HandleErrorAttribute 类把异常书写到队列中 public class MyExceptionAttribute: HandleErrorAttribute { ...