【学习打卡】第九天 前端工程师2022版 移动端事件2

课程名称： 前端工程师2022版

课程章节：移动端事件

主讲老师：Alex

课程内容：

今天学习的内容包括：

pointer事件

• 3-1Pointer事件基础

1、Pointer 事件的类型 

pointerover/ pointerenter/ pointerout/ pointerleave/ pointerdown/ pointermove/ pointerup/ pointercancel

2.注意事项

2.1Pointer事件直接继承了鼠标事件，在此基础上又添加了其他一些内容，处理Pointer 事件和鼠标事件几乎一致

2.2Pointer 事件在 PC 端和移动端都会触发

2.3触摸点移出目标元素，touchmove 书简依然会持续触发，pointermove 和 mousemove 事件不会再触发

3、Pointer 事件的特征检测（判断浏览器支不支持 Pointer 事件）

if ('onpointerdown' in window) {
        console.log('支持 Pointer 事件');     
}

• 3-2Pointer事件的event对象

1、Pointer事件里的event 对象的常用属性

pointerId： 指针id（唯一标识符）

type ；事件类型

pointerType ：指针类型（鼠标/笔/触摸等）

target： 目标元素

screenX/screenY ：指针相对于屏幕左边缘的X、Y坐标

clientX/clientY :指针相对于可视区域左边缘的X、Y坐标。不包括任何滚动偏移

x/y ：clientX/clientY 的别名

pageX/pageY ：指针相对于 HTML 文档左边缘的X、Y坐标。包括滚动偏移

2、阻止浏览器的默认行为

阻止 scrolling, pinch/zoom, 鼠标事件等默认行为

①Pointer 的事件处理函数中，evt.preventDefault()

阻止的是 PC 端的默认行为（不能阻止  scrolling, pinch/zoom, 鼠标事件等默认行为，可以阻止图片拖动的默认行为）

②可以在 touch 的事件处理函数中使用 evt.preventDefault() 阻止移动端的默认行为；

或在touch-action 设置触摸操作时浏览器的默认行为

3、注意事项

①Pointer 事件直接继承了鼠标事件，在此基础上又添加了其他一些内容，处理 Pointer 事件和处理鼠标事件几乎一致

②Pointer 事件在 PC 端和移动端都会触发

③触摸点移出目标元素，touchmove 事件依然会持续触发，pointermove 和 mousemove 事件不会再触发

④pointer与touch事件执行的区别

• touch事件的单指拖拽和pointer事件的单指拖拽

• <div class="box" id="box"></div>
      <script>
          // 托拽函数(参数是想让哪个元素被拖拽，就传哪个)
          const drag = ($el) => {
              // 每次拖拽开始的触摸点
              const startPoint = {};
              // 拖拽过程中移动到的点
              const movePoint = {};
              // 被拖拽元素的当前位置
              const curPos = {
                  x: 0,
                  y: 0
              };
              // 绑定事件
              $el.addEventListener('touchstart', startHandler, false);
              $el.addEventListener('touchmove', moveHandler, false);
              $el.addEventListener('touchend', endHandler, false);
              $el.addEventListener('touchcancel', endHandler, false);
              function startHandler(e) {
                  // 阻止默认事件
                  e.preventDefault();
                  // 获取触摸点
                  const touch = e.changedTouches[0];
                  // 记录拖拽开始的触摸点
                  startPoint.x = touch.pageX;
                  startPoint.y = touch.pageY;
              }
              function moveHandler(e) {
                  // 获取触摸点
                  const touch = e.changedTouches[0];
                  // 计算拖拽过程中移动到的点
                  movePoint.x = curPos.x + touch.pageX - startPoint.x;
                  movePoint.y = curPos.y + touch.pageY - startPoint.y;
                  $el.style.transform = `translate3d(${movePoint.x}px,${movePoint.y}px,0)`;
              }
              function endHandler() {
                  // 更新当前位置
                  curPos.x = movePoint.x;
                  curPos.y = movePoint.y;
              }
          };
          // 直接调用这个函数，把需要拖动的元素获取到传进去
          drag(document.getElementById('box'));
      </script>

• <script>
          // 托拽函数(参数是想让哪个元素被拖拽，就传哪个)
          const drag = ($el) => {
              // 每次拖拽开始的触摸点
              const startPoint = {};
              // 拖拽过程中移动到的点
              const movePoint = {};
              // 被拖拽元素的当前位置
              const curPos = {
                  x: 0,
                  y: 0
              };
  
              // 绑定事件
              //pointer事件pc端会同时触发，不像移动端（或touch事件）是按顺序触发
              $el.addEventListener('pointerdown', startHandler, false);
              // $el.addEventListener('pointerup', moveHandler, false);
              // $el.addEventListener('pointermove', endHandler, false);
              // $el.addEventListener('pointercancel', endHandler, false);
              $el.addEventListener('touchstart', (e) => {
                  e.preventDefault();
              }, false);
  
              function startHandler(e) {
                  // 记录拖拽开始的触摸点
                  startPoint.x = e.pageX;
                  startPoint.y = e.pageY;
  
                  //触摸点移出目标元素后（拖拽很多后会移出）,pointermove事件不会再触发,所以绑定到document上
                  document.addEventListener('pointermove', moveHandler, false);
                  document.addEventListener('pointerup', endHandler, false);
                  document.addEventListener('pointercancel', endHandler, false);
              }
              function moveHandler(e) {
                  e.preventDefault();
                  // 计算拖拽过程中移动到的点
                  movePoint.x = curPos.x + e.pageX - startPoint.x;
                  movePoint.y = curPos.y + e.pageY - startPoint.y;
  
                  $el.style.transform = `translate3d(${movePoint.x}px,${movePoint.y}px,0)`;
              }
              function endHandler() {
                  // 更新当前位置
                  curPos.x = movePoint.x;
                  curPos.y = movePoint.y;
  
                   //解绑,否则无法停止移动
                  document.removeEventListener('pointermove', moveHandler, false);
                  document.removeEventListener('pointerup', endHandler, false);
                  document.removeEventListener('pointercancel', endHandler, false);
              }
          };
  
          // 直接调用这个函数，把需要拖动的元素获取到传进去
          drag(document.getElementById('box'));
      </script>

  两个拖拽实现方式有所不同，逻辑是一样的，只是事件不一样，当然在我看来还是有很大区别的。

课程收获：

学习了pointer（指针）事件，知道了pointer的基础事件，以及pointer事件的event对象。

今天学习课程共用了1小时30分钟，复习昨天知识点10分钟，昨天的两个编程作业重新写了一遍，用时30分钟，今天的指针事件两个一共耗时近2小时。

今日共计学习4小时10分钟，希望学习效率能再提高点，早点结束，早点找工作