在前端开发中，我们通常需要了解用户当前是否正在与页面进行交互。这个信息可以用于许多不同的目的，例如：
- 显示或隐藏一些 UI 元素
- 在用户离开时提示保存数据
- 统计用户活跃度等
在本文中，我们将介绍如何使用 JavaScript 和 jQuery 来检测用户是否在页面上活动。
使用原生 JavaScript 实现
我们可以使用 window 对象的 addEventListener 方法来监听用户的鼠标和键盘事件，从而检测用户是否正在与页面进行交互。
以下是一个示例代码：
-- -------------------- ---- -------
--- -------- - ------
-------- ----------- -
-------- - -----
-
-------- ------------- -
-------- - ------
-
------------------------------------ -----------
---------------------------------- -----------
------------------------------------------- -- -- -
-- ----------------- -
--------------
- ---- -
------------
-
---
-- ------------
-------------- -- -
-------------------- - -------- - -----------
-- ------这段代码创建了 isActive 变量并将其初始化为 false。然后，它定义了两个函数：setActive 和 setInactive，分别将 isActive 设置为 true 和 false。
接下来，我们使用 addEventListener 方法注册了三个事件处理程序：
mousemove- 当用户移动鼠标时，调用setActive函数。keydown- 当用户按下键盘上的任何键时，调用setActive函数。visibilitychange- 当页面的可见性更改时，如果页面不可见，则调用setInactive函数；如果页面重新变为可见状态，则调用setActive函数。
最后，我们使用 setInterval 方法来轮询 isActive 变量，以检查用户是否活动。
使用 jQuery 实现
同样地，我们也可以使用 jQuery 来实现用户活动检测。jQuery 提供了一些方便的方法来注册事件处理程序和处理页面可见性更改事件。
以下是一个使用 jQuery 实现的示例代码：
-- -------------------- ---- -------
--- -------- - ------
-------- ----------- -
-------- - -----
-
-------- ------------- -
-------- - ------
-
------------------------- --------- -----------
---------------------------------- -- -- -
-- ----------------- -
--------------
- ---- -
------------
-
---
-- ------------
-------------- -- -
-------------------- - -------- - -----------
-- ------与原生 JavaScript 实现相比，jQuery 版本代码更为简洁。我们使用 $(document) 选择器来选择整个文档，并使用 on 方法注册了两个事件处理程序：mousemove 和 keydown。我们还使用 on 方法来注册了 visibilitychange 事件处理程序。
最后，我们使用 setInterval 方法来轮询 isActive 变量，以检查用户是否活动。
总结
在本文中，我们介绍了如何使用原生 JavaScript 和 jQuery 来检测用户是否在页面上活动。这些技术可以用于许多不同的应用场景，例如自动保存数据、统计用户活跃度等。无论您选择哪种方式实现用户活动检测，都需要保证代码简洁、高效，并且解决了您的具体需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29937