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

优质
小牛编辑
127浏览
2023-12-01

每当用户输入类型改变( 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.');
});