JS移动端事件

触屏事件

这类事件专属于移动端 在PC端并不响应 

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。

常见的触屏事件如下：

触摸事件对象 TouchEvent

是一类描述手指在触摸平面的状态变化事件，这类事件用于描述一个或多个触点，使开发者可以监视触点的 移动 增加 和减少

touchstart touchmove touchend 三个事件都会有各自的事件对象

小示例代码

  let box1 = document.querySelector('#box')
 
  box1.addEventListener('touchstart',function (e) {
    console.log('类似点击')// 手指按下
    console.log(e);
    console.log(e.touches[0])// 整个页面的触点列表
    console.log(e.targetTouches)// 点击目前事件元素的触点列表
  })
 
  box1.addEventListener('touchmove',function () {
    console.log('试图拖动')
  })
 
  box1.addEventListener('touchend',function (e) {
    console.log('离开了')// 手指离开（上升）
    console.log(e.changedTouches) // 记录离开时的信息数据
    // 当手指离开元素触点时 就没有了touches  targetTouches  但是会有changedTouches 它们都是列表 浏览器模拟时只有一个[0]
  })

移动端手指拖动元素的案例：

核心原理就是计算触点移动的位置 再把移动的位置 更新给 被拖动元素的样式

touchstart 触碰元素时：获取触点初始坐标，同时获得元素的初始位置

touchmove 移动手指时：计算手指的滑动距离，并且移动盒子

touchend 最后离开手指

手指拖动到屏幕边界会触发屏幕滚动 这里可以 阻止默认事件 e.preventDefault()

上代码：

 let box1 = document.querySelector('#box'),
      touchX = null,
      touchY = null,
      boxX = null,
      boxY = null;
 
 
  box1.addEventListener('touchstart',function (e) {
        touchX = e.targetTouches[0].pageX,
        touchY = e.targetTouches[0].pageY,
        boxX = box1.offsetLeft,
        boxY = box1.offsetTop;
        //console.log(touchX,touchY,boxX,boxY)
  })
 
  box1.addEventListener('touchmove',function (e) {
    let moveX = e.targetTouches[0].pageX - touchX,
        moveY = e.targetTouches[0].pageY - touchY,
        boxMx = moveX + boxX,
        boxMy = moveY + boxY;
        box1.style.left = boxMx + 'px'
        box1.style.top = boxMy + 'px'
        e.preventDefault()
  })
 
  box1.addEventListener('touchend',function (e) {
 
  })

元素.classList方法

ele.classList 返回元素的类名

ele.classList[0] 返回元素第一个类名

ele.classList.add('three') 添加一个类名 不会覆盖之前的 类名字符串前不用加 点

ele.classListremove('one') 删除类名

切换类：

btn.onclick = function () {    document.body.classList.toggle('bg')    }

移动端返回顶部和PC端一致 

封装一个动画函数

调用 window.scroll(0,目标Y)

在滚顶到一定程度 出现返回顶部的按钮 点击触发 返回顶部的函数

 let div1 = document.querySelector('div'),
    span = document.querySelector('span'),
    divT = div1.offsetTop;
 
  window.addEventListener('scroll',function () {
      if (window.pageYOffset > divT){
          span.style.display = 'block'
      }else {
        span.style.display = 'none'
      }
  })
 
  span.addEventListener('click',function () {
      goTop(window,0)
  })
 
  function goTop(obj,num,callback) {
    clearInterval(obj.timeOut) // 清除以前的定时器 只保留一个定时器执行
    obj.timeOut = setInterval(function () {
      let step = (num - window.pageYOffset) / 10
      // 取整 三元表达式 步长取为整数 正数就往大了取 负数就往小了取
      step = step > 0 ? Math.ceil(step) : Math.floor(step)
      if (window.pageYOffset == num){
        clearInterval(obj.timeOut)
        // if (callback){
        //   callback()
        // }
        callback && callback()
      }
      window.scroll(0,window.pageYOffset + step)
    },15)
  }

fastclick 解决移动端click延时问题

移动端click事件会有300ms的延时，原因是移动端端屏幕双击会缩放页面

解决方案：禁用缩放

 引入 fastclick.js  

 使用：

if ('addEventListener' in document){
    document.addEventListener('DOMContentLoad',function () {
          FastClick.attach(document.body)
    },false)
  }