tap事件的原理详解
点击事件延迟问题所在:
在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待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事件的原理详解的更多相关文章
- [转]js中几种实用的跨域方法原理详解
转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...
- IOS 触摸事件分发机制详解
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:MelonTeam 前言 很多时候大家都不关心IOS触摸事件的分发机制的实现原理,当遇到以下几种情形的时候你很可能抓破头皮都找不到解决方案 ...
- C#事件与委托详解
from https://www.cnblogs.com/sjqq/p/6917497.html C#事件与委托详解[精华 多看看] Delegatedelegate是C#中的一种类型,它实际上是一个 ...
- Namenode HA原理详解(脑裂)
转自:http://blog.csdn.net/tantexian/article/details/40109331 Namenode HA原理详解 社区hadoop2.2.0 release版本开始 ...
- Android 的事件传递机制,详解
Android 的事件传递机制,详解 前两天和一个朋友聊天的时候.然后说到事件传递机制.然后让我说的时候,忽然发现说的不是非常清楚,事实上Android 的事件传递机制也是知道一些,可是感觉自己知道的 ...
- Java网络编程和NIO详解6:Linux epoll实现原理详解
Java网络编程和NIO详解6:Linux epoll实现原理详解 本系列文章首发于我的个人博客:https://h2pl.github.io/ 欢迎阅览我的CSDN专栏:Java网络编程和NIO h ...
- 通过 JFR 与日志深入探索 JVM - TLAB 原理详解
全系列目录:通过 JFR 与日志深入探索 JVM - 总览篇 什么是 TLAB? TLAB(Thread Local Allocation Buffer)线程本地分配缓存区,这是一个线程专用的内存分配 ...
- select用法&原理详解(源码剖析)(转)
今天遇到了在select()前后fd_set的变化问题,查了好久终于找到一个有用的帖子了,很赞,很详细!!原文链接如下: select用法&原理详解(源码剖析) 我的问题是: 如下图示:在se ...
- epoll原理详解及epoll反应堆模型
本文转载自epoll原理详解及epoll反应堆模型 导语 设想一个场景:有100万用户同时与一个进程保持着TCP连接,而每一时刻只有几十个或几百个TCP连接是活跃的(接收TCP包),也就是说在每一时刻 ...
随机推荐
- 使用Node.js 搭建http服务器 http-server 模块
1. 安装 http-server 模块 npm install http-server -g 全局安装 2.在需要的文件夹 启动 http-server 默认的端口是8080 可以使 ...
- Python数据挖掘学习路程--起步
一.首先第一步我去了解了Python开发环境:Python(程序运行基础的解释器)+第三方类库(功能扩展)+编辑器(提高代码编辑效率) 编辑器有:Pycharm.Spyder.jupyter note ...
- 03_Java基础语法_第3天(Scanner、Random、流程控制语句)_讲义
今日内容介绍 1.引用类型变量的创建及使用 2.流程控制语句之选择语句 3.流程控制语句之循环语句 4.循环高级 01创建引用类型变量公式 * A: 创建引用类型变量公式 * a: 我们要学的Scan ...
- 经典SQL语句基础50题
很全面的sql语句大全.都是很基础性的,今天特意整理了下.大家互相学习.大家有好的都可以分享出来, 分享也是一种快乐. --创建数据库 create database SQL50 --打开SQL50 ...
- 使用RStudio学习一个简单神经网络
数据准备 1.收集数据 UC Irvine Machine Learning Repository-Concrete Compressive Strength Data Set 把下载到的Concre ...
- jQuery之css
设置css样式/读取css值 css() 1. 得到第一个p标签的颜色 2. 设置所有p标签的文本颜色为red 3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高 ...
- C++11 锁 lock
转自:https://www.cnblogs.com/diegodu/p/7099300.html 互斥(Mutex: Mutual Exclusion) 下面的代码中两个线程连续的往int_set中 ...
- linux php 访问sql server设置
1.安装freeTDS wget ftp://ftp.freetds.org/pub/freetds/stable/freetds-stable.tgz 1.1.进入到你下载的目录然后解压.tar - ...
- Spring 中常用注解原理剖析
前言 Spring 框架核心组件之一是 IOC,IOC 则管理 Bean 的创建和 Bean 之间的依赖注入,对于 Bean 的创建可以通过在 XML 里面使用 <bean/> 标签来配置 ...
- MVC 中创建自己的异常处理
1.新建类一个类继承 HandleErrorAttribute 类把异常书写到队列中 public class MyExceptionAttribute: HandleErrorAttribute { ...