返回介绍

onUserInputChange - 当用户输入类型改变执行回调advanced

发布于 2019-05-30 01:44:36 字数 1058 浏览 1100 评论 0 收藏 0

每当用户输入类型改变( mousetouch )时运行回调。用于根据输入设备启用/禁用代码。这个过程是动态的,适用于混合设备(例如触摸屏笔记本电脑)。

使用两个事件监听器。首先假设 mouse 输入并将 touchstart 事件监听器绑定到 document 上。在 touchstart 上,添加一个 mousemove 事件监听器来侦听连续两个 mousemove 事件在 20ms 内触发,使用 performance.now()。 在任何一种情况下,输入类型将作为参数运行回调。

const onUserInputChange = callback => {
  let type = 'mouse',
    lastTime = 0;
  const mousemoveHandler = () => {
    const now = performance.now();
    if (now - lastTime < 20)
      (type = 'mouse'), callback(type), document.removeEventListener('mousemove', mousemoveHandler);
    lastTime = now;
  };
  document.addEventListener('touchstart', () => {
    if (type === 'touch') return;
    (type = 'touch'), callback(type), document.addEventListener('mousemove', mousemoveHandler);
  });
};
onUserInputChange(type => {
  console.log('The user is now using', type, 'as an input method.');
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文