JavaScript中的Touch事件简介

Posted 2021-01-08 xjsp

在本教程中，我们可以通过检查触摸相关事件以及如何使用它们来检测和响应触摸和滑动事件，从而轻松获得javascript。随着基于触摸的设备数量不断增长，掌握这些事件对于理解老龄鼠标事件至关重要。本教程中的示例可以在触摸和非触摸启用的设备中进行应用，而后者则会回退到您信任的鼠标。准备给那些手指做一点锻炼吗？我们走吧！

JavaScript触摸事件

所以让我们潜入它。以下列出了JavaScript中支持的触摸事件：

JavaScript触摸事件

活动名称	描述
touchstart	当用户与触摸表面接触并在事件绑定的元素内创建触摸点时触发。
touchmove	当用户在触摸表面上移动触摸点时触发。
touchend	当用户从曲面移除触摸点时触发。无论在绑定元素内部还是外部移动触摸点，都会触发，例如，如果用户的手指首先从元素中滑出或者甚至离开屏幕边缘。
TouchEnter在	触摸点进入绑定元素时触发。这个事件没有泡沫。
touchleave	触摸点离开绑定元素时触发。这个事件没有泡沫。
touchcancel	当触摸点不再在触摸表面上注册时触发。例如，如果用户将触摸点移动到浏览器UI之外或移动到插件中，或者弹出警报模式，则会发生这种情况。

这些事件可以附加到页面上的任何元素，并传递一个事件对象，其中包含有关触摸点的详细信息，例如页面上的坐标。使用element.addEventListener()附加的事件（一个或多个），例如页面的BODY：

1 2 3 4 五 6 7

window.addEventListener(‘load‘, function(){ // on page load       document.body.addEventListener(‘touchstart‘, function(e){         alert(e.changedTouches[0].pageX) // alert pageX coordinate of touch point     }, false)   }, false)

在这里，我已经在页面加载后附加了“ touchstart”事件 document.body（您可能希望在此处执行此操作DOMContentLoaded）。内部的匿名函数 touchstart，我们看changedTouches的对象Event对象，其中包含由触摸表面上的触摸事件引发的每个触摸点的信息。在这里，我们只对触摸的第一个触摸点（即：手指）感兴趣，特别 pageX是触摸时页面上的坐标。

每当触发事件被触发时，Event对象都会保存有关触摸操作的大量信息; 您已经看到了它的 changedTouches对象，其中包含自上次触摸事件以来已更改的触摸点的信息。让我们进一步采取上面的例子，通过引入touchmove和touchend事件来显示DIV上从头到尾的触摸动作所经过的距离，从触摸物体的手指到抬起。

示例（为非触摸设备添加了鼠标模拟）：

 

触碰我！

状态

 

触摸然后移动手指以查看当前触摸状态和行进距离。DIV的html标记仅包含：

1 2 3 4 五

<div class="box" id="box1"> <h3> Touch Me! </h3> </div>   <h3 id="statusdiv">Status</h3>

脚本如下所示：

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32

<script>   window.addEventListener(‘load‘, function(){       var box1 = document.getElementById(‘box1‘)     var statusdiv = document.getElementById(‘statusdiv‘)     var startx = 0     var dist = 0       box1.addEventListener(‘touchstart‘, function(e){         var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger)         startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser         statusdiv.innerHTML = ‘Status: touchstart<br> ClientX: ‘ + startx + ‘px‘         e.preventDefault()     }, false)       box1.addEventListener(‘touchmove‘, function(e){         var touchobj = e.changedTouches[0] // reference first touch point for this event         var dist = parseInt(touchobj.clientX) - startx         statusdiv.innerHTML = ‘Status: touchmove<br> Horizontal distance traveled: ‘ + dist + ‘px‘         e.preventDefault()     }, false)       box1.addEventListener(‘touchend‘, function(e){         var touchobj = e.changedTouches[0] // reference first touch point for this event         statusdiv.innerHTML = ‘Status: touchend<br> Resting x coordinate: ‘ + touchobj.clientX + ‘px‘         e.preventDefault()     }, false)   }, false)   </script>

这里值得一提的几点：

• 我们调用event.preventDefault()以防止与每个事件关联的默认操作发生。在的情况下 touchstart，并touchend举例来说，如果绑定到元素是一个链接，而不是抑制默认的动作可能会导致浏览器导航至该链接，短切我们的操作的自定义序列。在这种情况下touchmove，event.preventDefault()当用户在绑定元素内移动手指时，调用会 阻止浏览器滚动页面。

• 再一次，我们访问 event.changedTouches[]每个触摸事件内部的第一个元素，以引用对元素做出的第一个触摸点（可能有多个手指使用），并检查clientX属性以获得触摸点相对于触摸点的水平坐标浏览器的左边缘（不包括任何滚动偏移）。这个属性适合我们在这里尝试做的事情，这只是为了获得在元素上保持触摸时行进的相对距离。

• 为了获得在事件touchstart 和touchend事件之间行进的距离，我们startx 在touchstart获得clientX触摸起始位置的阶段 定义变量。然后在整个 touchmove事件中，我们获得clientX触摸的位置并从中减去该startx值以获得在保持触摸点时行进的距离。

• 注意touchend事件如何被触发并显示最终的静止x坐标，即使手指在抬起手指时位于绑定元素之外也是如此。

该对象event.changedTouches[]只是在触摸相关事件期间填充的Event对象的众多属性之一。现在是时候详细研究这个对象了。

触摸期间的事件对象

该事件对象是在JavaScript中这个神秘的独角兽包含有关事件的信息发生时，无论它是一个链接的一个网址 onclick时，该键代码在按下键的onkeypress事件等。随着触摸相关的事件，该事件对象充满了一系列独特的属性，使我们能够深入了解触摸点的各个方面，从触摸表面上触摸的手指（或脚趾等）到屏幕上的精确坐标。

触摸期间的事件对象

属性	描述
ALT键	布尔值，指示触摸事件时是否按下了alt键。
changedTouches	一个Touch对象列表，代表直接参与此事件的每个触摸点。特别： 在touchstart，它包含在此touchstart事件期间与触摸表面接触的手指列表。 在touchmove，它包含在此touchmove事件期间移动的手指列表。 在touchend，它包含在此touchend事件期间刚刚从触摸表面移除的手指列表。 在touchenter，它包含在此touchenter事件期间已进入触摸表面的手指列表。 在touchleave，它包含在此touchleave事件期间退出触摸表面的手指列表。 您可以使用该length属性来获取内部的Touch对象的数量changedTouches[]。
中ctrlKey	布尔值，指示在触摸事件时是否按下了crtrl键。
metaKey	布尔值，指示在触摸事件时是否按下了元键。
Shift键，	布尔值，指示在触摸事件时是否按下了shift键。
targetTouches	触摸点的名单目前正在与触摸表面接触和从是本次活动的目标相同的元素开始了。 例如，假设您将touchstart事件绑定到DIV并将两根手指放在表面上。targetTouches仅包含放置在DIV内部的手指的信息，而不包含任何外部信息。 您可以使用该length属性来获取内部的Touch对象的数量targetTouches[]。
触摸	触摸对象列表，表示当前与触摸表面接触的所有触摸点，无论此刻触摸点在哪个元素上。
类型	事件的触发事件对象的类型，如touchstart，touchmove等
目标	与此事件关联的触摸的目标元素。

因此，例如，在touchstart事件期间，Event对象的touches属性允许我们访问当前与触摸表面接触的所有触摸点

1 2 3 4 五 6

document.body.addEventListener(‘touchstart‘, function(e){     var touchlist = e.touches     for (var i=0; i<touchlist.length; i++){ // loop through all touch points currently in contact with surface         //do something with each Touch object (point)     } }, false)

事件对象的三个属性evt.changedTouches， evt.targetTouches以及evt.touches是包含触摸对象的列表，用于制作每个触摸点触摸对象的所有清单对象。通过Touch对象，您可以获得有关特定触摸点的详细信息，例如屏幕上的坐标，其唯一标识符，以帮助您识别哪个触摸点是哪个，等等。您在开始时看到一些访问内部包含的Touch对象的代码evt.changedTouches：

1 2 3 4 五

box1.addEventListener(‘touchstart‘, function(e){     var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger)     startx = parseInt(touchobj.clientX) // get x position of touch point relative to left edge of browser     e.preventDefault() }, false)

这e.changedTouches[0]是一个Touch对象，是Touch对象的 clientX 一个属性。让我们现在正式看看Touch对象：

触摸对象

属性	描述
识别码	用于帮助唯一标识当前与触摸表面接触的每个触摸点的值。对于表面上的第一个唯一触摸点，值从0开始，对于第二个触摸点，值从1开始等。对于每个触摸点保持该值，直到用户的手指从表面抬起。 让我们说用户将两根手指放在一个元素上。此时的每个手指都分配有唯一的标识符。移动手指时，您可以使用每个触摸点的标识符来识别哪个触摸点是哪个。
screenX	触摸点相对于用户屏幕左边缘的x坐标。
screenY	触摸点相对于用户屏幕上边缘的y坐标。
clientX	触摸点相对于视口左边缘的x坐标，不包括滚动偏移。
clientY	触摸点相对于视口顶边的y坐标，不包括滚动偏移。
pageX属性	触摸点相对于视口左边缘的x坐标，包括滚动偏移。
pageY	触摸点相对于视口顶边的y坐标，包括滚动偏移。
半径X	椭圆的半径最接近地定义沿x轴的触摸区域（例如，手指，触笔）。
半径Y	椭圆的半径最接近地定义沿y轴的触摸区域（例如，手指，触笔）。
rotationAngle	该椭圆所描述（度）的角度和围绕其中心顺时针旋转。 radiusXradiusY
力	以0到1之间的整数形式返回触摸点的力，其中0表示设备检测不到力，1表示最高值。
目标	触摸点的目标元素; 换句话说，触摸点落在的元素上，其可能与其对应的触摸事件最初被限制的元素不同。在下面，this始终返回BODY元素，同时 Touch.target返回手指实际触及的元素，可以是DIV，SPAN等： document.body.addEventListener（‘touchstart‘，function（e）{   var touchobj = e.changedTouches [0]   console.log（this.tagName）//返回BODY   console.log（touchobj.target）//返回元素触摸点登陆 }，false）

您最常访问的Touch对象的属性是与坐标相关的属性，以帮助您确定在何处，以及使用一点数学，确定触摸操作的执行方向和速度。

现在，让我们倒回到Event对象，聊多一点的Touches，changedTouches和targetTouches性能，帮助更清楚地解释他们的区别：

• 触摸：当前与触摸表面接触的所有触摸点的列表。

• changedTouches：此事件中涉及的触摸点列表。例如，在某个touchmove事件中， changedTouches仅包含当前正在移动的触摸点列表，而Touches将包含当前在表面上的所有触摸点。

• targetTouches：触摸点的名单目前正在与触摸表面接触和从是本次活动的目标相同的元素开始了。例如，假设您将touchstart事件绑定到DIV并将两根手指放在表面上。targetTouches仅包含放置在DIV内部的手指的信息，而不包含任何外部信息。

安德烈在 ＃2给了一个非常照明例子来阐明这三个属性之间的细微差别：

• 当我放下手指时，所有三个列表都将具有相同的信息。它将在changeTouches中，因为放下手指是导致事件发生的原因
• 当我放下第二根手指时，触摸将有两个项目，每个手指一个。targetTouches仅在手指与第一根手指放在同一节点时才有两个项目。changedTouches将拥有与第二根手指相关的信息，因为它是导致事件发生的原因
• 如果我在同一时间放下两根手指，可以在changedTouches中有两个项目，每个手指一个
• 如果我移动我的手指，唯一会改变的列表是 changedTouches并且将包含与移动的手指（至少一个）相关的信息。
• 当我抬起一根手指时，它将从触摸中移除，targetTouches 并将在changedTouches中应用程序耳朵，因为它是导致事件发生的原因
• 删除我的最后一根手指会留下触摸和targetTouches为空，并且changedTouches将包含最后一根手指的信息

使用触摸移动对象

使用触摸在屏幕上水平或垂直移动DIV非常简单。看看下面的内容，当触摸和拖动时，它会在轨道上水平移动DIV：

示例（为非触摸设备添加了鼠标模拟）：

 

拖动

 

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33

<script>   window.addEventListener(‘load‘, function(){       var box2 = document.getElementById(‘box2‘),     boxleft, // left position of moving box     startx, // starting x coordinate of touch point     dist = 0, // distance traveled by touch point     touchobj = null // Touch object holder       box2.addEventListener(‘touchstart‘, function(e){         touchobj = e.changedTouches[0] // reference first touch point         boxleft = parseInt(box2.style.left) // get left position of box         startx = parseInt(touchobj.clientX) // get x coord of touch point         e.preventDefault() // prevent default click behavior     }, false)       box2.addEventListener(‘touchmove‘, function(e){         touchobj = e.changedTouches[0] // reference first touch point for this event         var dist = parseInt(touchobj.clientX) - startx // calculate dist traveled by touch point         // move box according to starting pos plus dist         // with lower limit 0 and upper limit 380 so it doesn‘t move outside track:         box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + ‘px‘         e.preventDefault()     }, false)   }, false)   </script>   <div id="track" class="track"> <div id="box2" style="left:0; top:0">Drag Me</div> </div>

外部#trackDIV是相对定位的元素，而#box2内部包含的DIV绝对定位。我们得到#box2DIV的初始左侧位置和touchstart事件触点的x坐标 。注意我在touchobj.clientX这里使用; 我们可以很容易地使用touchobj.pageX它，这没关系，因为我们只使用这个属性来帮助确定触摸点的相对距离。

在touchmove事件期间，我们通过获取其当前x坐标并从中减去初始x坐标来计算移动触摸点行进的距离。然后，为了移动#box2DIV，我们将该距离添加到DIV的初始左侧位置，投入下限和上限0和380px，以防止DIV移动到父DIV之外。随着我们的DIV盒现在用我们的手指移动！