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

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

body标签上的

为这些事件添加重置：

的onMouseOver
onscroll
的onkeydown

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

Answer 2

我同意上面的答案，但就我而言，我没有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();
})

检测任何用户交互

2 个答案: