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

时间:2023-01-13 21:41:49
     最近在做订餐系统,我负责的都是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