js- 理解 tap 事件|学习笔记

简介: 快速学习 js- 理解 tap 事件

开发者学堂课程【移动 Web 前端开发:js- 理解 tap 事件】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8426


js- 理解 tap 事件

 

内容介绍

一、tap 事件

二、click 事件的解决方案

三、移动端相关事件的演示

 

一、tap 事件

1.tap 的含义

理解到手势事件:上划下划左划右划后,另一个移动端事件也需要理解,现将此事件称为 08tap 事件(较为简单,移动端中时常运用)

Tap:轻触,轻触事件,即轻轻摸一下。在第一次讲述移动端时提及的一个属性:tap-highlight-color(点击高亮)

2. tap 事件的演示

(1)

<!DOCTYPE html>

<html>

<head lang=en>

<meta charset=UTF-8>

//进行 meta 标签的拿取

<meta name=‘viewport’>

Content=‘width=device-width,user-scaleable=no,initital-scale=1,0,maxmum-scale=1.0,

<title>tap 事件的原理 手势事件</title>

//进行样式的拿取

<style>

Body{

margin: 0;

padding: 0;

}

Div}

width: 100%;

height: 200px;

background: red;

}

</style>

</head>

<body>

//准备 div

<div></div>

//准备思科

<script>

Window.onload = function(){

}

</body>

</html>

(2)目的

tap 的形成过程,即理解 tap 事件的原理

由于 tap 事件也是一个过程,即可将其理解为一个手势事件。在接触 tap 之前,首先将总结的如移动端的轻触事件(例如通过轮播图衍生出了上划下划左划右划)进行讲解

(3)讲述 tap 的原因

Tap = 轻触

讲述左右上下滑动时,是由于轮播图有滑动而衍生而出的,而单独讲述tap与移动端的 click 事件有关。

(4)操作

//找到 Window.onload = function(){和document.querySelector(‘div’)进行绑定

Window.onload = function(){

var div = document.querySelector(‘div’);

//同时进行四个的绑定

div.addEventListener(‘click’,function(){

//打印click

console.log(‘click’);

});

//tap 事件与 touch 有关,touch-滑动 、触动、触摸的含义,而轻触与触摸有关

div.addEventListener(‘touchstart’,function(){

console.log(‘touchstart’);

});

div.addEventListener(‘touchmove’,function(){

console.log(‘touchmove’);

});

div.addEventListener(‘touchend’,function(){

console.log(‘touchend’);

}); 

}

//分别进行打印事件后,由于当时为模拟器并不明显,但同样能够查看出来。

假设只点击一下,猜想触发的事件中,第一为 touchstart ,第二为 touchend ,第三为 click;

实际演示1:

touchstart     08 tap事件.html:30

touchend       08 tap事件.html:36

click          08 tap事件.html:27

假设只滑动一下,猜想触发的事件中,第一为 touchstart,第二为 touchmove,第三为 touchend,此时click并不会执行。

实际演示2:

touchstart     08 tap事件.html:30

touchmove   08 tap事件.html:33

touchend       08 tap事件.html:36

故而,tap 与点击有关,与滑动无关。当点击时,click 最后执行,touchstart 和touchend 提前执行,click 在移动端存在问题。

尽管看似在本模拟器内各事件的打印都较为快速,间隔并不长,但在真正的移动端中,仍然存在一定的打印距离。

 

二、click 事件的解决方案

1.移动端的特点及问题:300ms左右的延时

(1)特点

存在此特性的情况下进行滑动,将会拥有一段停滞的时间,而后再进行滑动。在开始点击屏幕时即可算为点击。当手指触摸到屏幕时,若不控制时间进行滑动,将会被认为是点击。移动端众多后存在滑动事件,需要为滑动提供时间,若否则会在手指放置于屏幕旋即出发 click。故此延时为移动端特有。

简单来说,由于移动端有滑动曲线,应当为滑动空出时间令其进行滑动或点击的选择。

(2)问题

造成响应过慢的问题,使得用户体验下降:拥有有卡顿的效果。

2.click 事件的解决方案

方案一:tap(比 click 响应更快的事件,但此事件并非原生, click 可以进行绑定,而tap相似于手势事件),通过 touch 进行的衍生,即某些条件的归纳

(1)分析衍生进行的过程/tap 事件的原理

在给手势提出:

①必须滑动过

②滑动的距离超过50px

以上条件并满足时即认为其为滑动事件。

(2)在tap事件中,应满足的条件有:

①比 click 响应更快(150ms以内)

此前进行实际演示后得出,点击后首先将进行 touchstart 和 touchend,最后为click,,则可通过前两事件位于 click 之前进行判断。若 touch 两事件的相应小于click 的 300ms,则可认为其为 tap,实现了在 click 之前对其进行判断的处理。由于点击时只会触发 touchstart 和 touchend,即当判断得出 touchstart 和 touchend 之间的间隔比 click 更小时,就验证得到了了两者比 click 更快的事实。

实际演示

进行点击:

touchstart     08 tap事件.html:35

touchend       08 tap事件.html:41

click          08 tap事件.html:27

此时可以看到三个事件。

但若更换为长按,即可能会超过300ms,则 touchstart 和 touchend 可能比 click更慢。

click 为300ms,当比 click 响应更快时为一种更快速更简便的查看方式。将响应更快的称为 tap,即tap的出现是为了提高响应速度。同时会运用到通过 touchstart 和 touchend 的间隔时间与300ms的对比大小。

②不能滑动

满足以上条件即可称为 tap 事件

(3)求得响应时间的方法

当记录的不再是坐标而是时间时,记录刚刚触摸到屏幕的时间和离开屏幕的时间,两时间一相减即响应时间。

判断两时间的方法:

/*1.记录开始触摸到屏幕的时间/

div.addEventListener(‘touchstart’,function(){

console.log(‘touchstart’);

});

div.addEventListener(‘touchmove’,function(){

console.log(‘touchmove’);

});

div.addEventListener(‘touchend’,function(){;

/*2.更新现在的时间,以比较记录开始触摸的时间。若<150ms,则满足条件。/

console.log(‘touchend’);

});

}

对于比较的方法,存在另外的一种打印方式名为 time,属于 console 之中的time。

//1.记录开始触摸到屏幕的时间

div.addEventListener(‘touchstart’,function(){

//给定一个参数开始记录时间

console.time(‘time’);

});

div.addEventListener(‘touchmove’,function(){

console.log(‘touchmove’);

});

div.addEventListener(‘touchstart’,function(){

console.time(‘time’);

//此处的 time 仅作为记录时间

});

div.addEventListener(‘touchmove’,function(){

console.log(‘touchmove’);

});

div.addEventListener(‘touchend’,function(){;

//2.更新现在的时间,以比较记录开始触摸的时间。若<150ms,则满足条件。

//进行打印。当前存在两种 console,但两者之中只会在 End 处进行打印。

//去除某个参数和现在事件的差

console.timeEnd(‘time’);

});

实际演示1

刷新之后进行点击

time:86.269ms     08 tap事件.html:45

click           08 tap事件.html:27

刷新之后进行点击(time 的含义)

time:103.704ms     08 tap事件.html:42

当前 touchend 和 touchstart 的响应时间是103.704ms,此为console.time(‘time’)的固有功能。

在开始处记录时间,于 end 处再次记录时间与此前的 time 进行对比,即可打印出两次之间的时间。

实际演示2

刷新之后进行点击

time:109.371ms     08 tap事件.html:45

time:71.391ms      08 tap事件.html:45

进行快速点击

time:109.371ms     08 tap事件.html:45

time:71.391ms      08 tap事件.html:45

time:55.822ms      08 tap事件.html:45   //此为当前最快速

time:69.977ms      08 tap事件.html:45

time:63.0141ms      08 tap事件.html:45

time:94.632ms      08 tap事件.html:45

time:407.133ms      08 tap事件.html:45//此为当前最慢,不能满足tap事件的要求

在以上演示中,只有最后一次407.133不满足 tap 事件,其余均满足,体现出了响应速度的提高。此时触发 lick 去进行所想做的事,响应速度将会大大提高。

time 相关内容了解即可,真实情况下其只进行打印,并不能使用,此时需要进行记录。

//在最初声明一个 time

/*1.记录开始触摸到屏幕的时间/

var startTime = 0;

//获取当前事件的方法:两个记录的时间相减

startTime 1= new Date().getTime(); //当前距离1970年的毫秒数

此种方法首先需要进行初始化,需要花费时间,现有一种更为简洁的方法:

startTime = Date.now(); //此相当于直接掉落对象,而不去初始化对象

console.time(‘time’);

});

div.addEventListener(‘touchmove’,function(){

});

div.addEventListener(‘touchstart’,function(){

console.time(‘time’);

//此处的 time 仅作为记录时间

});

div.addEventListener(‘touchmove’,function(){

console.log(‘touchmove’);

});

div.addEventListener(‘touchend’,function(){;

//2.更新现在的时间,以比较记录开始触摸的时间。若<150ms,则满足条件。

//进行打印。当前存在两种 console,但两者之中只会在 End 处进行打印。

//去除某个参数和现在时间的差

console.timeEnd(‘time’);

console.log(‘Date.now()-startTime’); //与 timeEnd 功能相同,以现在的时间减去上一次记录的时间,即两个时间的差,此即响应时间,算出来的是整数

});

实际演示:

刷新之后进行点击

time:101.435ms     08 tap事件.html:46

100                 08 tap事件.html:47

由于打印需要耗费时间,此间相差0.1毫秒

进行刷新、点击

time:110.002ms    08 tap事件.html:46

110                08 tap事件.html:47

time:88.060       08 tap事件.html:46

90                08 tap事件.html:47

time:98.730ms    08 tap事件.html:46

104                 08 tap事件.html:47

time:98.017ms     08 tap事件.html:46

90                 08 tap事件.html:47

此时时间近乎相同.

根据自身的方式同样可以计算出两次之间的时间差。 

不能滑动的演示

//在最初声明一个 time

/*1.记录开始触摸到屏幕的时间/

var startTime = 0;

var isMove = false;

startTime = Date.now(); //此相当于直接掉落对象,而不去初始化对象

console.time(‘time’);

});

div.addEventListener(‘touchmove’,function(){

isMove = true;

});

div.addEventListener(‘touchstart’,function(){

console.time(‘time’);

//此处的 time 仅作为记录时间

});

div.addEventListener(‘touchmove’,function(){

console.log(‘touchmove’);

});

div.addEventListener(‘touchend’,function(){;

//2.更新现在的时间,以比较记录开始触摸的时间。若<150ms,则满足条件。

//进行打印。当前存在两种 console ,但两者之中只会在 End 处进行打印。

//去除某个参数和现在时间的差

console.timeEnd(‘time’);

console.log(‘Date.now()-startTime’); //与 timeEnd 功能相同,以现在的时间减去上一次记录的时间,即两个时间的差,此即响应时间,算出来的是整数

//console.log(‘Date.now()-startTime);

/*1.肯定比 click 响应快

2.不能滑动*

满足以上条件才能算作 tap/

if(!isMove &&(Date.now()-startTime)<150))  {

//非 isMove,即没有滑动过。isMove 被设成 false,当为 false 时为没有滑动,当满足的条件为!false = true, 证明了未滑动,若 isMove = true,!true 即为 false,则不满足条件。满足未滑动并且满足 Date.now()-startTime)<150 条件,才能称之为 tap

//进行打印

console.log(‘tap’ );

}

//其他情况下应该清除

iMove = false;

startTime = 0; //方便下一次的点击

});

}

</script>

</body>

</html>

实际演示:

刷新之后进行点击

90              08 tap事件.html:46

tap             08 tap事件.html:46

490             08 tap事件.html:55

此时490并非 tap

进行滑动

124            08 tap事件.html:46

尽管此时小于150,但由于当前为滑动,同样不是 tap

综合两个条件即封装了比 click 更快速的事件,即 tap。

tap 自身并不能进行封装,但当前存在众多的第三方框架,例如 zepto (移动端 js库),其中包含了 tap 事件。通过 js 库能够解决响应过慢的问题。

方案二:fastclick

含义:快速点击

在使用制作动画时,其中有表示快慢的部分。

作用:是一个非常快速的库,在移动浏览器发生介于轻敲及点击之间 的指令时,能够摆脱 300ms 的延迟。,使应用程序更加灵敏快捷。与 tap 达到的功能、效果相同。此插件引入后即可使 click 加快并使用 click .当 click 能够使用后便无必要使用tap。

一般进行移动端开发时都会使用的并非此库,此为另外一种解决方案。

 

三、移动端相关事件的演示

1.轮播图

衍生出上划下划左划右划 手势事件

2.移动端滑动效果

依靠 touch 相关事件,根据触摸位置的改变,改变对应元素的位移 translate

3.移动端轻触事件

即 tap

相关文章
|
2月前
|
JavaScript 前端开发
|
2月前
|
JavaScript 算法
|
2月前
|
JavaScript
|
4天前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
11天前
|
前端开发 JavaScript
JavaScript 中的事件委托机制详解
【2月更文挑战第2天】本文将深入探讨 JavaScript 中的事件委托机制,介绍其原理、优势以及实际应用场景,帮助读者更好地理解并运用这一重要的前端开发技术。
|
14天前
|
JavaScript 前端开发 UED
JavaScript中的事件委托机制及实践应用
事件委托是JavaScript中常用的性能优化技巧,通过将事件监听器绑定在父元素上,实现对子元素事件的统一管理,减少页面中事件处理函数的数量,提升页面性能。本文将介绍事件委托的原理和实践应用,帮助开发者更好地理解和运用这一技术。
|
2月前
|
JavaScript 前端开发
js的常用事件
js的常用事件
11 1
|
2月前
|
JavaScript 前端开发 API
在js中如何去实现全屏事件?
在js中如何去实现全屏事件?
17 0
|
2月前
|
JavaScript
js中的事件冒泡和事件捕捉
js中的事件冒泡和事件捕捉
9 0
|
2月前
|
JavaScript 前端开发
JavaScript回车事件
JavaScript回车事件
22 0