diff --git a/snippets/onUserInputChange.md b/snippets/onUserInputChange.md new file mode 100644 index 000000000..99f5ac60d --- /dev/null +++ b/snippets/onUserInputChange.md @@ -0,0 +1,29 @@ +### onUserInputChange + +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. + +```js +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); + }); +}; +``` + +```js +onUserInputChange(type => { + console.log('The user is now using', type, 'as an input method.'); +}); +``` diff --git a/tag_database b/tag_database index 4ed134dee..675b144b9 100644 --- a/tag_database +++ b/tag_database @@ -86,6 +86,7 @@ negate:logic nthElement:array objectFromPairs:object objectToPairs:object +onUserInputChange:browser orderBy:object palindrome:math percentile:math