您的位置:首页 > 移动开发

html5(移动端)触摸点位置获取

2016-06-02 11:20 691 查看
在移动端使用html5的触屏事件主要就是为了解决灵敏度的问题传统的js或者jquery有的时候在移动端灵敏度是不行的。

-------------------------

主要是三个事件:touchstart、touchmove、touchend

touchstart:手指头触摸屏幕上的事件

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

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

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

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

---------在移动端用到最多的出就是触碰点的获取我们就讲讲触碰点问题:

那么先说明pc端,在pc端直接使用e.pageX和e.pageY进行获取就完全ok了但是

在移动端是无法识别这个东西的,而且在不同的事件下获取鼠标的触碰点还是

不同的,下面详细介绍在touchstart、touchmove、touchend三种事件下的鼠标

位置点获取:

(1)touchstart事件下获取:e.originalEvent.targetTouches[0].pageX

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

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

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

(2)touchmove事件获取:这个和(1)的获取方式是一样的就不多说了

(3)touchend事件的获取:e3.originalEvent.changedTouches[0].pageX

下面是其他的一些介绍:

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

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

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

identifier:标识触摸的唯一ID。

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

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

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

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

target:触目的DOM节点目标。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: