老师请检查

<!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>
    <div class="box" id="box"></div>
    <p id="start"></p>
    <p id="mobile"></p>
    <p id="end"></p>
 
    <script>
      // 获取DOM元素
      const boxEL = document.getElementById("box");
      const startEL = document.getElementById("start");
      const mobileEL = document.getElementById("mobile");
      const endEL = document.getElementById("end");
 
      //定义函数startHandler 直接在事件处理函数中调用即可
      const startHandler = e => {
        // 获取event对象的属性changedTouches保存到touch
        const touch = e.changedTouches[0];
 
        // 往p标签里面填充HTML元素，获取按下时 相对于HTML文档的X、Y坐标并取整
        startEL.innerHTML = `touch开始的位置: ${parseInt(
          touch.pageX
        )}.${parseInt(touch.pageY)}`;
      };
 
      // 往p标签里面填充HTML元素，获取移动时 相对于HTML文档的X、Y坐标并取整
      const moveHandler = e => {
        const touch = e.changedTouches[0];
        mobileEL.innerHTML = `touch移动的位置: ${parseInt(
          touch.pageX
        )}.${parseInt(touch.pageY)}`;
      };
 
      // 往p标签里面填充HTML元素，获取松开时 相对于HTML文档的X、Y坐标并取整
      const endHandler = e => {
        const touch = e.changedTouches[0];
        endEL.innerHTML = `touch结束的位置: ${parseInt(touch.pageX)}.${parseInt(
          touch.pageY
        )}`;
      };
 
      // 绑定事件处理函数
      boxEL.addEventListener("touchstart", startHandler, false);
      boxEL.addEventListener("touchmove", moveHandler, false);
      boxEL.addEventListener("touchend", endHandler, false);
    </script>
  </body>
</html>

清夏_ 2022-10-24

源自：移动端事件 2-5 自由编程

收起

2回答

imooc_慕慕回答被采纳获得+3积分 2022-10-24 10:51:24

同学你好，代码效果正确，很棒，祝学习愉快~

收起回答

清夏_ 提问者 #1

老师这种写法感觉不是很美观，我想把事件处理函数写到自定义函数startHandler前面去，但是那样解析到我定义的函数startHandler的时候就会报错。有什么方法改一下吗

2022-10-24 10:52:02
imooc_慕慕回复提问者清夏_ #2

同学你好，该问题已在下方回复，祝学习愉快~

2022-10-24 11:07:59

清夏_ 提问者 2022-10-24 10:48:05

老师这种写法感觉不是很美观，我想把事件处理函数写到自定义函数startHandler前面去，但是那样解析到我定义的函数startHandler的时候就会报错。有什么方法改一下吗

收起回答

imooc_慕慕 #1

同学你好，参考如下：

boxEL.addEventListener('touchstart',
            (event) => {
                startEL.innerText = `touch开始的位置: ${parseInt(event.changedTouches[0].pageX)}.${event.changedTouches[0].pageY}`;
            }
 
            , false);
        boxEL.addEventListener('touchmove',
            (event) => {
                mobileEL.innerText = `touch移动的位置:${parseInt(event.changedTouches[0].pageX)}.${event.changedTouches[0].pageY}`;
            }
            , false);
        boxEL.addEventListener('touchend',
            (event) => {
                endEL.innerText = `touch结束的位置:${parseInt(event.changedTouches[0].pageX)}.${event.changedTouches[0].pageY}`;
            }
            , false);