移动端总结并记录触碰坐标，在一定时间延迟后(300ms以内),在该坐标上查找元素，如果元素有mouse事件，就执行。

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 使用

参考地址：github.com/ustbhuangyi…

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);
    }
}
```

移动端总结

touch事件

anywhere

加速度事件

事件防抖事件节流实现