30-seconds-of-code/snippets/onUserInputChange.md

title, tags

title	tags
onUserInputChange	browser,event,advanced

Run the callback whenever the user input type changes (mouse or touch). Useful for enabling/disabling code depending on the input device. This process is dynamic and works with hybrid devices (e.g. touchscreen laptops).

• Use two event listeners.
• Assume mouse input initially and bind a touchstart event listener to the document.
• On touchstart, add a mousemove event listener to listen for two consecutive mousemove events firing within 20ms, using performance.now().
• Run the callback with the input type as an argument in either of these situations.

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.');
});