900字范文 > 移动端web开发---Touch事件详解

移动端web开发---Touch事件详解

时间：2022-10-27 21:15:13

一、pc端事件回顾

HTML事件、DOM0事件、DOM2事件

事件对象。

如果上述概念不清楚，请先去了解。

二、移动端事件简介

2.1 pc端事件在移动端的问题

移动设备主要特点是不配备鼠标，键盘也只是在需要输入的地方才会激活虚拟键盘。所以以前的pc端事件在移动端使用起来就没有以前那么爽了，虽然部分仍然可以使用。

click事件的300ms延迟问题。

第一代iphone发布，由于那个年代所有的网页都是针对大屏的pc端设计的，iphone的Safari浏览器为了让用户浏览网页的时候可以浏览到整个网页，把viewport设置为960px(参考前面的文章)，好是好，但是由于缩放了整个页面，导致内容变得非常小，视力6.0的都不一定看得清楚。

所以Safari浏览器自带了一个当时看起来相当酷的一个功能：双击缩放。你双击页面的时候，浏览器会智能的缩放当前页面到原始大小。

双击缩放的原理就是，当你click一次之后，会经过300ms之后检测是否再有一次click，如果有的话，就会缩放页面。否则的话就是一个click事件。

所以，当你想执行click操作的时候，就感觉到了”卡顿”。如果点击之后100ms之后没有反应，基本就有卡顿的感觉。

dblclick事件失效

由于双击缩放的存在，pc端的dblclick事件也失效了。

2.2移动端web新增touch事件

随着触屏设备的普及，w3c为移动端web新增了touch事件。

最基本的touch事件包括4个事件：

touchstart

当在屏幕上按下手指时触发

touchmove

当在屏幕上移动手指时触发

touchend

当在屏幕上抬起手指时触发

touchcancel

当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

三、相关知识详解

与移动端相关的interface主要有三个：

TouchEvent

表示触摸状态发生改变时触发的event

Touch

表示用户和触屏设备之间接触时单独的交互点(a single point of contact)

TouchList

表示一组touches。当发生多点触摸的时候才用的到。

3.1、TouchEvent详解

为了区别触摸相关的状态改变，存在多种类型的触摸事件。可以通过检查触摸事件的TouchEvent.type属性来确定当前事件属于哪种类型。

注意:在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用event.preventDefault()来阻止鼠标事件被触发。

var i = 1;var box = document.querySelector("div");var ps = document.querySelectorAll("p");box.addEventListener("touchstart", function (e){ps[0].innerHTML = e.type + i++;})box.addEventListener("touchmove", function (e){ps[1].innerHTML = e.type + i++;})box.addEventListener("touchend", function (e){ps[2].innerHTML = e.type + i++;})

3.1.1 touchstart

当用户手指触摸到的触摸屏的时候触发。事件对象的target就是touch发生位置的那个元素。

<div><p></p></div><script>var i = 1;var box = document.querySelector("div");var p = document.querySelector("p");box.addEventListener("touchstart", function (e){p.innerHTML = e.target.tagName + ", " + i++; // P})</script>

3.1.2 touchmove

当用户在触摸屏上移动触点(手指)的时候，触发这个事件。一定是先要触发touchstart事件，再有可能触发touchmove事件。

touchmove事件的target与最先触发的touchstart的target保持一致。touchmove事件和鼠标的mousemove事件一样都会多次重复调用，所以，事件处理时不能有太多耗时操作。不同的设备，移动同样的距离touchmove事件的触发频率是不同的。

有一点需要注意：即使手指移出了原来的target元素，则touchmove仍然会被一直触发，而且target仍然是原来的target元素。

<div><p></p></div><script>var i = 1;var box = document.querySelector("div");var p = document.querySelector("p");box.addEventListener("touchmove", function (e){p.innerHTML = e.target.tagName + ", " + i++;})</script>

3.1.3 touchend

当用户的手指抬起的时候，会触发touchend事件。如何用户的手指从触屏设备的边缘移出了触屏设备，也会触发touchend事件。

touchend事件的target也是与touchstart的target一致，即使已经移出了元素。

3.1.4 touchcancel

当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):

由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。当用户产生的触点个数超过了设备支持的个数，从而导致TouchList中最早的Touch对象被取消

touchcancel事件一般用于保存现场数据。比如：正在玩游戏，如果发生了touchcancel事件，则应该把游戏当前状态相关的一些数据保存起来。

3.2 TouchList详解

一个TouchList代表一个触摸屏幕上所有触点的列表。

举例来讲, 如果一个用户用三根手指接触屏幕(或者触控板), 与之相关的TouchList对于每根手指都会生成一个Touch对象, 共计 3 个.

TouchList有1个属性，2个方法

只读属性：length

返回这个TouchList中Touch对的个数。(就是有几个手指接触到了屏幕)

方法：identifiedTouch()

返回值是在TouchList中的第 1 个Touch对象，已经被标记为过时，虽然有的浏览器还可以使用，但是不建议使用。

方法：item(index)

返回TouchList中指定索引的Touch对象。

想获取TouchList对象，TouchEvent的三个属性可以获取到TouchList:

changedTouches:(只读)

这个TouchList对象列出了和这个触摸事件对应的那些发生了变化的Touch对象。

对于touchstart事件, 这个TouchList对象列出在此次事件中新增加的触点。对于touchmove 事件，列出和上一次事件相比较，发生了变化的触点。对于 touchend 列出离开触摸平面的触点（这些触点对应已经不接触触摸平面的手指）

targetTouches:(只读)

这个TouchList列出了那些touchstart发生在这个元素，并且还没有离开touch surface的touch point(手指)。是touches的一个严格子集。

touches`:(只读)

这个TouchList列出了事件触发时：touch suface上所有的touch point。

touches.length>=targetTouches.length

看下面的代码：

<div><p style="font-size: 50px; color: #ffffff;"></p></div><script>var box = document.querySelector("div");var p = document.querySelector("p");box.addEventListener("touchend", function (e){p.innerHTML = e.changedTouches.length; //返回Touch对象的个数for(var i = 0; i < e.changedTouches.length; i++){//遍历出来每个Touch对象console.log(e.changedTouches.item(i));}})</script>

看下面的代码

<div></div><p></p><script>var div = document.querySelector("div");var p = document.querySelector("p");div.addEventListener("touchstart", function (e){var msg = "touches.length: " + e.touches.length +"<br> targetTouches.length: " + e.targetTouches.length +"<br> changedTouches.length: " + e.changedTouches.length;p.innerHTML = msg;})</script>

操作：

放1个手指在div上先放1个手指在其他地方，然后再放1个手指在div上先放1个手指在其他地方，然后再逐渐放2个手指在div上

3.3 Touch详解

表示用户和触摸设备之间接触时单独的交互点(a single point of contact)。

这个交互点通常是一个手指或者触摸笔。

触摸设备通常是触摸屏或者触摸板。

js对象提供了多个属性来描述Touch对象。
这些属性分成两大部分：
基本属性(Basic properties)
触摸区域相关属性 (Touch area)
Touch area目前还在试验阶段。我们先不做过多的讨论。
基本属性:
这些属性均是只读属性

identifier:

表示每 1 个Touch对象的独一无二的identifier。有了这个identifier可以确保你总能追踪到这个Touch对象。

<div><p style="font-size: 50px; color: #ffffff;"></p></div><script>var box = document.querySelector("div");var p = document.querySelector("p");box.addEventListener("touchend", function (e){var touchList = e.changedTouches;for (var i = 0; i < touchList.length; i++){console.log(touchList.item(i).identifier); }})</script>

screenX:

触摸点相对于屏幕左边缘的x坐标。

screenY:

触摸点相对于屏幕上边缘的y坐标。

clientX:

触摸点相对于浏览器的viewport左边缘的x坐标。不会包括左边的滚动距离。

clientY:

触摸点相对于浏览器的viewport上边缘的y坐标。不会包括上边的滚动距离。

pageX:

触摸点相对于document的左边缘的x坐标。与clientX不同的是，他包括左边滚动的距离，如果有的话。

pageY:

触摸点相对于document的左边缘的y坐标。与clientY不同的是，他包括上边滚动的距离，如果有的话。

target:

总是表示手指最开始放在触摸设备上的触发点所在位置的element。即使已经移出了元素甚至移出了document, 他表示的element仍然不变

没有左右滚动：

左右滚动：pageX明显大于clientX

四、封装移动端事件

前面的是最基本的事件，直接使用相对比较麻烦，所以有必要对一些常用事件进行封装。
比如：单击事件、双击事件、滑动方向等

使用：

$("div").tap(function (e){console.log("单击事件")})$("div").longTag(function (){console.log("长按事件");})$("div").slideLeft(function (e){console.log(this);this.innerHTML = "左侧滑动了....."})

参考资料：mdn相关文档

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。