Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

浏览器 - 监听用户输入方式的改变 (advanced)

2019-11-29

描述

当用户输入方式发生变化(mouse or touch)时运行回调。根据输入设备启用/禁用代码很有用。这个过程时动态的,并且适用于混合设备(例如:触摸屏笔记本电脑)。

提示

  • 使用两个事件监听器
  • 假设一开始的输入为 mouse,然后在文档上绑定一个 touchstart 事件监听
  • touchstart 中添加一个 mousemove 事件监听器来监听两次连续的 mousemove 事件触发是否在 20 ms 内(使用 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.');
});

返回总目录

每天 30 秒系列之 JavaScript 代码


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步