检测任何用户交互

Question

我有一个 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 中滚动时。

我是否必须将我的重置功能添加到我的应用程序中所有可能的事件中，还是有更简单的方法来检测任何交互？

Answer 1

我同意上面的答案，但就我而言，我没有 JQuery。

我还监听 touchstart 并单击。此外，我使用去抖来等待所有交互停止一秒钟。

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();
})

Answer 2

涵盖所有机器类型（PC、平板电脑/手机（触摸设备）、不带鼠标的 PC..）

在 body 标签上为这些事件添加一个重置：

• 鼠标悬停
• 上滚
• 按键按下

我相信这应该涵盖任何活动