Menu

gitpiper

onUserInputChange javascript Code Snippet in 2024

browsereventadvanced

Last Updated: 3 November 2024

Runs the callback whenever the user input type changes (mouse or touch).

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

javascript snippet similar to onUserInputChange For You in November 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️