移动端笔记01

touch事件

• 移动端touch事件

  • touchstart：手指在元素上摁下

  • touchmove：手指在元素上摁下之后，在屏幕中移动

  • touchend：手指在元素上摁下之后，在屏幕中抬起

  • touch 事件 和 mouse 事件的区别

    mousedown --> touchstart

    mousemove --> touchmove

    mouseup --> touchend

  • 事件点透

    • mouse 事件的延迟问题

      事件点透：
      在移动端中，手指触碰时，如果有 touch 事件，会立即执行，
      并记录触碰坐标，在一定时间延迟后(300ms以内),在该坐标上查找元素，如果元素有mouse事件，就执行。

  • 阻止默认事件

    ​ 如果要给 document、html、body这些元素的touch事件中阻止默认事件，一定记得设置，passive:false。

    • 阻止 touchstart 事件带来的影响
      1. 默认双指缩放被禁止
      2. 滚动条被禁止
      3. 鼠标事件被禁止（包括a标签的href）
      4. 禁止长按菜单弹出
      5. 阻止元素获得焦点和失去焦点
    • 阻止 touchmove 事件带来的影响
      1. 默认双指缩放被禁止
      2. 滚动条被禁止

• TouchEvent 对象详解

  • touches：当前屏幕上的手指列表
  • targetTouches：当前元素上的手指列表
  • changedTouches：触发当前事件的手指列表

• better-scroll 使用

  参考地址：https://github.com/ustbhuangyi/better-scroll

  anywhere

  提供了一个 node 服务器
  安装：npm i anywhere -g
  使用，在当前目录下，使用命令行 anywhere

  加速度事件

  • orientationchange 监听横竖屏切换

  • window.orientation 检测手机横竖屏

    window.orientation 检测手机横竖屏
    90 -90 横屏
    0 180 竖屏

  • devicemotion 监听手机加速度发生变化

    • acceleration 手机加速度检测
    • accelerationIncludingGravity 手机重力加速度检测(加速度 + 重力-地心引力)

  • 兼容处理

    • IOS 和 安卓的兼容处理
      `
      function getIos(){
      var u = window.navigator.userAgent;
      return !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
      }

    • devicemotion 监听手机加速度发生变化

      注意安卓下 和 IOS 下取值相反的问题。当 安卓下 x 为 10时，IOS 下 x 为 -10，y，z一样的问题。

    • IOS 各个版本

      1. 一般版本 https：在 IOS 中，想要使用陀螺仪相关 API，需要使用 https 协议。

      2. 12.2 用户可以在设置中，关闭 陀螺仪相关 API 权限

      3. 在 IOS 13 之后，IOS 又做了一个安全设定，当我们想要使用 动作与方向的权限时，需要先向用户请求授权，DeviceMotionEvent.requestPermission 授权请求函数

      4. 在 IOS 13.3 之后，IOS 又又又 搞幺蛾子了，获取用户授权，必须用户手动触发

  事件防抖事件节流实现

  • 函数防抖[debounce]：希望函数只执行一次，哪怕我进行了多次调用，短时间内多次调用函数，只执行一次，执行最后一次触发。

    function debounce(fn,delay=200,isStart = false){
          if(typeof fn !== "function"){
              return console.error("请传入一个函数");
          }
          let timer = 0;
          let isFirst = true; // 是不是第一次执行这个函数
          return function(...arg){
              let _this = this;
              if(isFirst&&isStart){ // 如果isStart 为 true 就在第一次执行时触发
                  fn.apply(_this,arg);
              }
              isFirst = false;
              clearTimeout(timer);
              timer = setTimeout(()=>{
                  if(!isStart){
                      fn.apply(_this,arg);
                  }
                  isFirst = true;
              },delay);
          }
      }
    

  • 函数节流[throttle]：让函数保持在一个可接受的固定频率执行

    function throttle(fn,interval=200,start = true){
        if(typeof fn !== "function"){
            return console.error("请传入一个函数");
        }
        let timer = 0;
        return function(...arg){
            let _this = this;
            if(timer){
                return ;
            }
            start&&fn.apply(_this,arg); 
            timer = setTimeout(() => {
                (!start)&&fn.apply(_this,arg); 
                timer = 0;
            }, interval);
        }
    }