点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
首先,移动端事件,我们大概可以分成三类,触摸事件,手势事件和传感器事件。而在这三类事件中,应用最广的事件就是触摸事件了。所以很有必要对它有一个清晰的认识,只有这样,你才能灵活的将它应用到不同的业务中。
一,看一下它的定义
触摸事件是一个从触摸到移动,然后离开的过程,这跟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节点
三,看一下实例
代码:
效果:
总结一下:
移动事件中,除了触摸事件之处,还有手势事件和传感器事件等。这些也只需要关注和了解。
閱讀更多 小鄭搞碼事 的文章