浏览器 - 监听用户输入方式的改变 (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 代码