在移动设备上，用户通过触摸屏幕进行交互是很常见的。而 jQuery 是前端开发中非常流行的 JavaScript 库，它提供了许多便利的函数和工具，使得我们可以更加方便地操作 DOM、响应用户事件等。jquery-touch-events 是一个基于 jQuery 的 npm 包，它提供了一系列触摸事件的封装函数，方便我们在移动设备上处理用户的手势操作。
安装和引入
我们可以通过 npm 安装 jquery-touch-events：
npm install jquery-touch-events
然后在需要使用的页面中，引入 jQuery 和 jquery-touch-events：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="node_modules/jquery-touch-events/src/jquery.mobile-events.min.js"></script>
事件类型
jquery-touch-events 封装了以下几种触摸事件：
touchstart: 用户开始触摸屏幕时触发。touchend: 用户结束触摸屏幕时触发。touchmove: 用户在屏幕上滑动时触发。tap: 用户轻触屏幕时触发。longtap: 用户长按屏幕时触发。
事件绑定
我们可以使用 jQuery 提供的 .on() 方法来绑定这些触摸事件。例如，下面的代码监听了一个 <div> 元素上的 tap 事件，并在触发时弹出一个提示框：
<div id="my-div">点击我！</div>
<script>
$("#my-div").on("tap", function() {
alert("你点击了我！");
});
</script>事件对象
跟其他 jQuery 的事件一样，当触发一个触摸事件时，事件处理函数会接收到一个事件对象。这个事件对象包含了一些属性和方法，可以帮助我们获取触摸相关的信息。以下是一些常用的属性和方法：
originalEvent: 原生的事件对象。type: 事件类型，如"touchstart"。touches: 当前所有触摸点的信息数组。targetTouches: 在当前元素上的触摸点的信息数组。changedTouches: 产生变化的触摸点的信息数组（比如，在touchend事件中，这个数组只包含结束触摸的那个点的信息）。
下面的例子演示了如何使用这些属性和方法来实现拖动一个元素：
-- -------------------- ---- -------
---- ------------ ---------------- --------- ----- ------ ---- ------------------
--------
--- ---------- - ------
--- -------- --------
-------------
----------------- --------------- -
-- ---------
---------- - -----
-- --------------
--- ------- - ----------------------------
------- - ---------------- - ------------------------------------
------- - ---------------- - -----------------------------------
--
---------------- --------------- -
-- ------------- -------
-- ------
-----------------------
-- --------
--- ------- - ----------------------------
-------------------
----- ---------------- - --------
---- ---------------- - -------
---
--
--------------- ---------- -
-- ----
---------- - ------
---
---------在上面的例子中，我们首先用一个变量 isDragging 来标记当前是否处于拖动状态。当用户开始触摸
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36005