js实战：实现移动端 Touch 滑动反弹！_js移动端手指触摸移出元素仍然执行-优快云博客

本文链接：https://blog.youkuaiyun.com/cocoer_/article/details/88799412

本文介绍了如何在移动端使用Touch事件结合JavaScript实现滑动反弹效果。详细讲述了Touch事件的种类，事件触发时的手指信息，以及如何通过记录滑动距离实现滑动、限制滑动区间和设置反弹效果。最后，文章提供了实现此效果的关键代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下：（需要完整代码请看文末）
在这里插入图片描述
移动端 Touch 滑动反弹
什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下：

效果图

准备工作

什么是移动端的Touch事件？在移动端Touch事件可以细分成三种，分别是：touchstart、touchmove和touchend，并且touch事件必须要用addEventListener去监听。

touchStart当手指触碰到屏幕的时候触发
touchmove当手指在屏幕上不断移动的时候触发
touchend当手指离开屏幕的时候触发

Touch 事件触发的 Event 对象：

// 手指触碰到屏幕时触发
element.addEventListener('touchstart', function (e) {
    // 打印的事件对象
    console.log(e);
})

在这里插入图片描述
changedTouches、targetTouches、touches都是伪数组，里面装的是手指列表
三种返回对象的区别：

其实这三种返回的对象，都是表示用户触摸事件时的手指信息，之所以是一个伪数组，是因为有可能出现多指同时触摸，但是在实际工作中一般不去考虑多指的情况。而它们唯一的区别就是在touchstart和touchmove事件的时候，changedTouches、targetTouches、touches都能获取到手指的信息，但是在touchend事件的时候，targetTouches、touches对象是不能返回离开屏幕时的手指信息，只有changedTouches对象能返回。

有哪些手指信息？

我们可以看下上面的图片，在changedTouche[0]中，有些值：

clientX:74 // 触摸点相对于浏览器的 viewport 左边缘的 x 坐标，不会包括左边的滚动距离。 clientY:73 // 触摸点相对于浏览器的 viewport 上边缘的 Y 坐标，不会包括上边的滚动距离。 screenX:2202 // 触摸点相对于屏幕左边缘的 x 坐标。 screenY:327 // 触摸点相对于屏幕上边缘的 Y 坐标。 pageX:65 // 触摸点相对于 document 的左边缘的 x 坐标，包括左边的滚动距离 pageY:18 // 触摸点相对于 document 的上边缘的 Y 坐标，包括左边的滚动距离

2. 基本结构
HTML部分：

<aside class="main">
  <div class="draw" id="draw">
    <ul>
      <li style="background:orange">列表一</li>
      <li style="background:yellowgreen">列表二</li>
      <li style="background:yellow">列表三</li>
      <li style="backg