您的位置:首页 > Web前端 > JavaScript

JavaScript中的Touch事件简介

2018-09-27 11:57 555 查看

在本教程中,我们可以通过检查触摸相关事件以及如何使用它们来检测和响应触摸和滑动事件,从而轻松获得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该椭圆所描述(度)的角度和围绕其中心顺时针旋转。 
radiusX
radiusY
以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>

外部

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

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


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  JavaScript Touch 事件简