在移动端事件中,那个应用范围最广的触摸事件,需要重点关注

点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

首先,移动端事件,我们大概可以分成三类,触摸事件,手势事件和传感器事件。而在这三类事件中,应用最广的事件就是触摸事件了。所以很有必要对它有一个清晰的认识,只有这样,你才能灵活的将它应用到不同的业务中。

一,看一下它的定义

触摸事件是一个从触摸到移动,然后离开的过程,这跟PC端的鼠标事件非常相似,如同mousedown,mousemove和mouseup,表示鼠标的按下,移动和释放。

主要分以下四类:

1、touchstart - 当手指触摸屏幕时触发

2、touchmove - 当手指在屏幕上滑动时触发

3、touchend - 当手指离开屏幕时触发

4、touchcancel - 当系统停止跟踪触摸时触发

二,内部结构解析

移动端事件传递信息的机制是相同的,都是通过Event对象传递信息。触摸事件,Event对象是TouchEvent类型,除了包含一般事件都有的信息外,还包含下面这些:

  • touches - 表示当前跟踪的触摸操作touch对象的集合

  • targetTouches - 当前事件目标上touch对象的的集合

  • changeTouches - 表示至上次触摸发生了改变的touch对象的集合

最重要的是:每一个touch对象同样包含相关事件信息如下:

1、clientX - 触摸目标在视口中的X坐标

2、clinetY - 触摸目标在视口中的Y坐标

3、pageX - 触摸目标在页面中的X坐标

4、pageY - 触摸目标在页面中的Y坐标

5、screenX - 触摸目标在屏幕中的X坐标

6、screenY - 触摸目标在屏幕中的Y坐标

7、target - 触摸的DOM节点

三,看一下实例

代码:

在移动端事件中,那个应用范围最广的触摸事件,需要重点关注

效果:

在移动端事件中,那个应用范围最广的触摸事件,需要重点关注

总结一下:

移动事件中,除了触摸事件之处,还有手势事件和传感器事件等。这些也只需要关注和了解。


分享到:


相關文章: