检测任何用户交互答案

【问题标题】：Detect any user interaction检测任何用户交互
【发布时间】：2014-11-25 03:46:34
【问题描述】：

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

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

【问题讨论】：

您将事件处理程序附加到哪个元素？
$(this)的默认值，我猜的窗口？
你不知道...？ O_o 好吧，我首先尝试的是附加到document。

标签： javascript events user-interaction

【解决方案1】：

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

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

鼠标悬停
打开滚动
onkeydown

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

【讨论】：

一旦我的鼠标坏了，我不得不只用键盘浏览互联网。
好的，您也可以将 onFocus() 添加到页面上的第一个可聚焦元素。想一想，onmouseover 对 PC 有好处，但对平板电脑不适用。也许是 onmouseover（body）、onscroll（body）和 onfocus（第一个可以接收焦点的元素）的组合？
如果我用箭头键滚动页面只是阅读文本，onfocus 永远不会被触发。
实际上body也可以接收焦点，所以应该覆盖所有内容。或者 body 标签上的 onkeydown 可能会更好。
像这样 - document.querySelector('body').addEventListener('mouseover', reset); document.querySelector('body').addEventListener('keydown', reset); window.addEventListener('scroll', reset);

【解决方案2】：

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

【讨论】：