在移动设备上，用户通过触摸屏幕进行交互。有时候我们需要判断触摸事件中的 touchend 是否在拖动之后发生。这种情况下，我们可以使用 JavaScript 来帮助我们实现这一目的。
检测拖动和 touchend 事件
我们可以使用以下代码来检测拖动事件和 touchend 事件：
--- ---------- - ------
--- ------------
-------- ------------------ -
---------- - ------
----------- - --------------------- -
---------- - -----
-- ---- -- ------
-
-------- ----------------- -
-- ------------ -
--------------------------
-
-
-------- ---------------- -
-- ------------- -
--------------------- ----- -------
-
-在这个例子中，handleTouchStart 函数会在用户开始触摸屏幕时被调用。它会设置一个计时器，在 50 毫秒之后将 isDragging 设置为 true。如果在这段时间内用户没有移动屏幕，那么 isDragging 将保持为 false。
handleTouchMove 函数会在用户移动屏幕时被调用。如果 isDragging 为 true，则说明用户已经开始拖动了，我们可以清除计时器以避免误判。
最后，handleTouchEnd 函数会在用户停止触摸屏幕时被调用。如果 isDragging 为 false，则说明 touchend 是在拖动结束之后发生的。
深入理解
上面的代码看起来很简单，但其中有一些细节需要注意。首先，我们在 handleTouchStart 函数中使用了一个计时器，在一定时间内判断是否有拖动发生。这是因为 touchstart 事件和 touchmove 事件的触发非常快，有时候难以判断它们之间的时间间隔。
其次，我们在 handleTouchMove 函数中检测是否有拖动发生。这是因为有些移动设备会在用户轻轻滑动屏幕时触发 touchmove 事件，但此时并没有真正的拖动发生。
最后，在 handleTouchEnd 函数中，我们只在 isDragging 为 false 时输出 'touchend after drag'。这是因为如果 isDragging 为 true，那么 touchend 显然是在拖动过程中发生的。
实际应用
我们可以将上述代码嵌入到任何需要判断 touchend 是否在拖动之后发生的场景中。例如，我们可以使用它来实现下拉刷新功能：
--------- -----
------
------
----- --------------- ---------------------------- -----------------
-------
------
---- ---------------
---- ----------------------
--- ----------
-------------
-------------
-------------
-----
------
--------
--- ---------- - ------
--- ------------
-------- ------------------ -
---------- - ------
----------- - --------------------- -
---------- - -----
-- ---- -- ------
-
-------- ----------------- -
-- ------------ -
--------------------------
-
-
-------- ---------------- -
-- ------------- -
--------------------- ----- -------
----------
-
-
-------- --------- -
-- ----
-
------------------------------------------------------------------- ------------------
------------------------------------------------------------------ -----------------
----------------------------------------------------------------- ----------------
---------
-------
-------在这个例子中，我们使用了一个简单的下拉刷新示例来演示如何使用上述代码。当用户下拉屏幕并
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28612