045-Web前端-JS-手机触摸事件

手机触摸事件

#6.24

---

1.触摸事件

描述：在移动端设备中由触摸操作触发的事件

类型：

(1)touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。

(2)touchmove:当手指在屏幕上滑动时连续的触发。

(3)touchend:当手指从屏幕上移开时触发。

(4)*touchcancel:当系统停止跟踪触摸时触发。(如电话接入或者弹出信息,一般在这个操作中来做一些暂停游戏类的操作)

注意：

     ps：如非特殊说明，事件均为冒泡事件

     pss：手机触摸事件必须使用dom2来进行绑定

     psss：可以给一个元素添加多个触摸事件

    var div=document.querySelector('div');
    div.addEventListener('touchstart',function(){console.log('开始触摸');})
    div.addEventListener('touchmove',function(){console.log('在屏幕上滑动');})
    div.addEventListener('touchend',function(){console.log('触摸结束');})
    div.addEventListener('touchcancel',function(){console.log('触摸中断');})

---

2.事件对象的属性

更在了 033节——事件概述与绑定

//event事件后面会详细展开

---

3.触摸对象的属性

触摸对象，即【事件对象的touches属性】中的每一个元素。

一次触摸会创建一个触摸对象。

 

触摸对象中提供了很多属性方便我们获取和使用：

clientX:触摸目标在视口中的X坐标。

clientY:触摸目标在视口中的Y坐标。

 

identifier：表示触摸的唯一ID。

 

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX:触摸目标在屏幕中的x坐标。

screenY:触摸目标在屏幕中的y坐标。

 

target:触摸的DOM节点坐标

 

通常情况下都会在触摸事件被触发的时候，通过这两个属性来获取当前节点的位置。