一、定义
①touch是移动端的触摸事件,而且是一组事件,主要有以下事件:
- touchstart 事件:当手指触摸屏幕的时候触发
- touchmove 事件:当手指在屏幕来回滑动的时候触发
- touchend 事件:当手指离开屏幕的时候触发
- touchcancel事件:当被终止滑动的时候触发(来电、弹消息)
②利用touch相关事件可以实现移动端常见的滑动效果和移动端常见的手势事件,比较常用的事件主要是touchstart、touchmove、touchend,并且一般是使用addEventListener绑定事件
dom.addEventListener('touchstart',function(){ }); dom.addEventListener('touchmove',function(){ }); dom.addEventListener('touchend',function(){ });
二、使用
touch事件
三、事件对象event
四、分析移动端滑动实现的原理
①让触摸的元素随着手指的滑动做位置的改变
②位置的改变,需要当前的坐标,当前手指的坐标和移动后的坐标都可以在事件对象中拿到
touch事件
五、移动端的手势事件(实现左滑手势和右滑手势的原理)
手势事件的实现