第127天:移动端-获取触摸点的位置

Posted 半指温柔乐

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第127天:移动端-获取触摸点的位置相关的知识,希望对你有一定的参考价值。

移动端获取触摸点的方式说明
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节点目标。   

以上是关于第127天:移动端-获取触摸点的位置的主要内容,如果未能解决你的问题,请参考以下文章

js移动端触摸事件

移动端判断触摸的方向

javascript 在移动端怎么做到左右触摸事件 ontouchmove吗?求代码

移动端弹性滑动以及vue记录滑动位置

移动端 触摸事件 ontouchstartontouchmoveontouchendontouchcancel

第130天:移动端-rem布局