移动端常用触摸事件以及常用坐标

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端常用触摸事件以及常用坐标相关的知识,希望对你有一定的参考价值。

一、触摸事件

基本事件:

 

touchstart   //手指刚接触屏幕时触发

touchmove    //手指在屏幕上移动时触发

touchend     //手指从屏幕上移开时触发

 

下面这个比较少用:

touchcancel  //触摸过程被系统取消时触发

每个事件都有以下列表,比如touchend的targetTouches当然是 0 咯:

 

touches         //位于屏幕上的所有手指的列表

targetTouches   //位于该元素上的所有手指的列表

changedTouches  //涉及当前事件的所有手指的列表

 

每个事件有列表,每个列表还有以下属性:

 

复制代码

其中坐标常用pageX,pageY:

 

pageX    //相对于页面的 X 坐标

pageY    //相对于页面的 Y 坐标

clientX  //相对于视区的 X 坐标

clientY  //相对于视区的 Y 坐标

screenX  //相对于屏幕的 X 坐标

screenY  //相对于屏幕的 Y 坐标

 

identifier // 当前触摸点的惟一编号

target   //手指所触摸的 DOM 元素

 

其他相关事件:

 

event.preventDefault()   //阻止触摸时浏览器的缩放、滚动条滚动

var supportTouch = "createTouch" in document  //判断是否支持触摸事件

以上是关于移动端常用触摸事件以及常用坐标的主要内容,如果未能解决你的问题,请参考以下文章

移动端 Touch 事件

移动端延迟300ms的原因以及解决方案

js移动端触摸事件

触摸事件MotionEvent

移动端触摸相关事件touchtapswipe

js移动端滑动事件