html5 移动端获取触摸点位置学习笔记

     最近在做订餐系统，我负责的都是PC端的实现，虽然功能逻辑一样，但移动端的实现我只是旁观者，没有实践，搜了一些资料学习下。

 1.touchstart事件

       手指头触摸屏幕上的事件

2.touchmove

       手指头在屏幕上滑动触发的事件

3.touchend

        当手指从屏幕上离开的时候触发

利用jquery配合使用方法如下：

$("#demoid").bind('touchstart',function(){ //代码处理});

touchstart、touchmove、touchend三种事件下的鼠标位置点获取：

（1）touchstart事件下获取：e.originalEvent.targetTouches[0].pageX

说明：由于手指头是多点触摸到屏幕上的我们所以e.originalEvent.targetTouches的

意思是一个手指触碰点集合我们只需要获取第一个点就可以了所以

e.originalEvent.targetTouches[0]，所以位置.pageX .pageY就ok了

（2）touchend事件的获取：e3.originalEvent.changedTouches[0].pageX

 

下面是其他的一些介绍：

每个Touch对象包含的属性如下。

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的唯一ID。

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

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

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

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

target：触目的DOM节点目标。   

   现阶段算是知识点堆砌了，先了解一下，然后在实践中认识。顺便推荐个微信公众号：coder_life