老师请解答

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body style="height: 2000px">
    <div class="box" id="box"></div>
 
    <script>
      const drag = EL => {
        const startPoint = {}; // 每次拖拽最开始的触摸点
 
        const movePoint = {}; // 拖拽过程中移动的点
 
        const curPos = {
          // 被拖拽元素的当前位置
          x: 0,
          y: 0,
        };
 
        EL.addEventListener("pointerdown", startHandler, false);
        EL.addEventListener("pointermove", moveHandler, false);
        EL.addEventListener("pointerup", endHandler, false);
        EL.addEventListener("pointercancel", endHandler, false);
 
        function startHandler(e) {
          e.preventDefault();
 
          startPoint.x = e.pageX;
          startPoint.y = e.pageY;
        }
        function moveHandler(e) {
          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;
        }
      };
 
      drag(document.getElementById("box"));
    </script>
  </body>
</html>

清夏_ 2022-10-24

源自：移动端事件 3-3 单指拖拽

收起

1回答

好帮手慕慕子 2022-10-24 17:42:54

同学你好，问题解答如下：

1、这个是固定的规定，即：Pointer 的事件处理函数中，evt.preventDefault() 阻止的是 PC 端的默认行为，不能阻止移动端移动手指页面跟着拖动等默认行为，所以在移动端会触发默认行为，导致无法实现效果。

2、之前的是在touch相关事件，结合preventDefault方法阻止移动端的默认事件，语法是允许的。

3、结合第一条去理解，规定就是这样的，Pointer事件函数中的preventDefault方法无法阻止移动端默认行为。

祝学习愉快~

收起回答

提问者清夏_ #1

我理解了老师 pointer只能阻止PC端的默认行为所以需要再写一条touch补丁去阻止一下移动端的默认行为才可以在移动端正常拖拽。

2022-10-24 17:46:04
好帮手慕慕子回复提问者清夏_ #2

是的，理解是对的，祝学习愉快~

2022-10-24 17:47:58