javascript 检测任何用户交互

hujrc8aj 于 2022-12-28 发布在 Java

关注(0)|答案(2)|浏览(160)

我有一个Web应用程序，当用户登录时，如果用户不做任何事情来警告他即将注销，我想在一段时间后显示一个弹出窗口。
所以我使用了间隔，并在每次用户交互时重置它：

$(this).mousedown(function () {
    reset();
});

$(this).mousemove(function () {
    reset();
});

$(this).scroll(function () {
    reset();
});

$(this).mouseup(function () {
    reset();
});

$(this).click(function () {
    reset();
});

$(this).keypress(function () {
    reset();
});

但在某些情况下，计时器不会重置，当用户仍在使用应用程序时，弹出窗口会显示出来，例如在div中滚动时。
我是否必须将重置函数添加到应用程序中所有可能的事件中，或者是否有更简单的方法来检测任何交互？

JavaScript

来源：https://stackoverflow.com/questions/26122115/detect-any-user-interaction

2条答案

按热度按时间

zf2sa74q1#

涵盖所有机器类型（PC、平板电脑/手机（触摸设备）、无鼠标的PC..）
在body标签上添加以下事件的重置：

鼠标悬停时
滚动
接通

我相信这应该包括所有活动

赞(0）回复(0）举报 2022-12-28

wh6knrhe2#

我同意上面的答案，但在我的情况下，我没有JQuery。
我也会监听touchstart和click。此外，我还使用debounce来等待所有交互停止一秒钟。

import _ from 'lodash';
let ListenForInteraction = function () {
  let lastId = Date.now();
  let callbacks = {};
  this.onInteraction = (callback) => {
    lastId++;
    callbacks[++lastId] = callback;
    return
  };

  this.handleInteraction = _.debounce(() => {
    console.log('Interaction')
    for (let i in callbacks) {
      if (typeof callbacks[i] === 'function') {
        callbacks[i]();
      } else {
        delete callbacks[i];
      }
    }
  }, 1000);
  document.body.addEventListener('mousemove', this.handleInteraction);
  document.body.addEventListener('scroll', this.handleInteraction);
  document.body.addEventListener('keydown', this.handleInteraction);
  document.body.addEventListener('click', this.handleInteraction);
  document.body.addEventListener('touchstart', this.handleInteraction);
};

let listenForInteraction = new ListenForInteraction();
export default listenForInteraction;

//USAGE
listenForInteraction.onInteraction(() => {
  localStorage.last_interaction = Date.now();
})

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 检测任何用户交互

2条答案

相关问题

热门标签

最新问答