移动设备的普及使得触摸屏幕成为许多Web应用程序的必要条件。但是，通过JavaScript处理触摸事件并不总是容易的事情。jQuery是一个流行的JavaScript框架，它可以简化对触摸事件的处理。本文将介绍如何使用jQuery来转换JavaScript中的触摸事件，并提供示例代码。
触摸事件
在JavaScript中，触摸事件有三个主要类型：touchstart、touchmove和touchend。touchstart事件在用户接触屏幕时触发，touchmove事件在用户滑动手指时触发，而touchend事件在用户从屏幕上抬起手指时触发。每个事件对象都包含有关触摸事件的信息，例如触摸点的坐标和压力，以及触摸事件是否被取消。
以下是一个简单的JavaScript示例，演示如何检测touchstart事件：
document.addEventListener("touchstart", function(event) {
console.log("Touch started at (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")");
}, false);当用户在屏幕上接触时，控制台将显示触摸点的坐标。
使用jQuery
使用jQuery处理触摸事件可以使代码更简洁和易于阅读。jQuery提供了一组方法，例如on()和off()，可以用于处理触摸事件。下面是使用jQuery检测touchstart事件的示例代码：
$(document).on("touchstart", function(event) {
console.log("Touch started at (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")");
});注意，在jQuery中，我们使用on()方法来注册事件处理程序，而不是addEventListener()。此外，触摸事件对象的属性名称略有不同。在jQuery中，我们可以访问event.originalEvent.touches数组，其中包含与JavaScript中相同的信息。
示例代码
以下是一个完整的jQuery示例，用于检测用户是否在屏幕上滑动其指针：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----- ------ ---------------
------- -----------------------------------------------------------
------ ----------------
---------- -
------ ------
------- ------
----------------- -----
------- ---- -----
-
--------
-------
------
---- ---------------------
------- -----------------------
---------------------------- -
--- --------- - ----------------
--- ------- -------
-------------------------- --------------- -
------ - ---------------------------------------
------ - ---------------------------------------
---
------------------------- --------------- -
--- -------- - ---------------------------------------
--- -------- - ---------------------------------------
--- ------ - -------- - -------
--- ------ - -------- - -------
-- ----------------- - ----------------- -
-- ------- - -- -
------------------- ---------
- ---- -
------------------- --------
-
- ---- -
-- ------- - -- -
------------------- --------
- ---- -
------------------- ------
-
-
---
---
---------
-------
-------在此示例中，我们创建了一个200x200像素的灰色div元素，并在其上注册了touchstart和touchmove事件处理程序。用户在屏幕上滑动手指时，我们计算水平和垂直方向上的偏移量，并根据偏移量判断用户向哪个方向滑动。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27198