手机端的touch事件

touch是移动端的一组触摸事件:

  1. touchstart 当手指触摸屏幕的时候触发
  2. touchmove 当手指在屏幕来回的滑动时候触发
  3. touchend 当手指离开屏幕的时候触发
  4. touchcancel 当被迫终止滑动的时候触发(来电,弹消息)
    利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件

使用touch

  1. 绑定事件:box.addEventListener(‘touchstart’,function () { });
    手机端原生JS推荐用addEventListener添加事件;

  2. 事件对象e:
    名字:TouchList------触摸点(一个手指触摸就是一个触发点,和屏幕的接触点的个数)的集合
    changedTouches 改变后的触摸点集合
    targetTouches 当前元素的触发点集合
    touches 页面上所有触发点集合

  3. 触摸点集合在每个事件触发的时候会不会去记录触摸
    changedTouches 每个事件都会记录
    targetTouches,touches 在离开屏幕的时候无法记录触摸点

  4. 分析滑动实现的原理:
    4.1 就是让触摸的元素随着手指的滑动做位置的改变
    4.2 位置的改变:需要当前手指的坐标
    4.3 在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
    4.4 clientX clientY 基于浏览器窗口(视口)
    4.4 pageX pageY 基于页面(视口)
    4.4 screenX screenY 基于屏幕

猜你喜欢

转载自blog.csdn.net/qq_34708564/article/details/89517376
今日推荐