JavaScript中的Touch事件简介

在本教程中，我们可以通过检查触摸相关事件以及如何使用它们来检测和响应触摸和滑动事件，从而轻松获得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盒现在用我们的手指移动！

原文地址：https://www.cnblogs.com/xjsp/p/9712351.html

时间： 2024-10-02 22:21:48

JavaScript中的Touch事件简介的相关文章

android中根据touch事件判断单击及双击

private static final int MAX_INTERVAL_FOR_CLICK = 250;     private static final int MAX_DISTANCE_FOR_CLICK = 100;     private static final int MAX_DOUBLE_CLICK_INTERVAL = 500;     int mDownX = 0;     int mDownY = 0;     int mTempX = 0;     int mTempY

JavaScript中常用的事件

转自:http://www.cnblogs.com/dtdxrk/p/3551454.html 作者:文刀日月 JavaScript中常用的事件 事件委托 可以给元素添加多个事件 var addHandler = function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); //false表示冒泡阶段 }else if(element.atta

javascript移动设备Web开发中对touch事件的封装实例

在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现.zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题. 于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7.Andorid 4 上的一些比较常见的浏览器中测试通过. ta

JavaScript中的Event事件对象详解

JavaScript事件[event] 在JavaScript中对于事件来讲,首先,我们需要了解这样几个概念:事件:事件处理程序:事件类型:事件流:事件冒泡:事件捕获:事件对象:浏览器内核:事件绑定:事件方面的性能优化(事件委托.移除事件处理程序):常见的浏览器兼容问题等. 什么是事件event: JavaScript事件是:浏览器.文档(document)窗口中的发生的特定的交互瞬间:而JavaScript和HTML之间的交互行为就是通过事件来触发的. 事件处理程序: 事件处理程序:我们用户在

H5中的touch事件

touch中共有touchstart.touchmove和touchend三个事件: touchstart:触摸开始的时候触发 touchmove:手指在屏幕上滑动的时候触发 touchend:触摸结束的时候触发 并且每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控): touches:当前位于屏幕上的所有手指的列表: targetTouches:位于当前DOM元素上的手指列表: changedTouches:涉及当前事件手指的列表. 每个触摸点由包含了如下

解决JavaScript中批量添加事件的问题

这是JavaScript中一个老生常谈的问题,也是初学者较难理解的问题.当给一系列元素添加事件时,常常会出现一些我们不希望出现的问题.例如以下代码: //给li元素批量添加click事件 window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0;i<lists.length;i++){ lists[i].onclick = function(){ alert(i

javascript中常用的事件绑定方法

我们要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTML标签.JavaScript支持在标签中直接绑定事件,语法为:    onXXX="JavaScript Code" 其中

javascript中查看元素事件函数的一些技巧

在分析一些网页的时候,经常会发现点击某个按钮会触发某个动作,当页面比较复杂,包含的js文件又多,这时候要找到这段触发函数的代码写在哪里就比较困难.比如,在某个html页面中,发现如下一个按钮,点击后会使得页面元素有变化.但是并未看到onclick事件,那说明该事件可能是通过javascript中的addEventListener方法绑定的(IE不支持该方法,使用的是attachEvent,不理解为微软何非要和W3C标准对着干).例如下面的代码: <input type="button&qu

web前端中的Touch事件实例

例1.单个手指touch <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> &